Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Follow
Facebook Twitter Instagram Youtube
Contact

How to update css of last span of every li in jquery?

byMR
March 14, 2023
//My Code but it only updates the very last span:
$('#titlediv_1683224 li span :last').css({'margin-top': '10px'}); 

//I want to update last span of every li with .css({'margin-top': '10px'})
<div class="titlediv" name="titlediv_1683224" id="titlediv_1683224">
   <table class="Form" width="100%" cellspacing="0" cellpadding="0" border="0">
      <tbody>
         <tr id="cf_1683223_tr">
            <th id="cf_1683223_th" class="Form" scope="row"><label for="cf_1683223">Signed Application Upload:</label></th>
            <td id="cf_1683223_td" ng-non-bindable="" class="Form textvarfield" name="td1">
               <div class="ssUploadedFileList" data-orderby="filename|asc" id="cf_1681768_container">
                  <ul id="filelist_cf_1681768_983444564" class="pd4ml">
                     <li class="ssUploadedFileList-listViewHeader">
                        <span>
                           <div class="ssCheckBoxContainer"><input type="checkbox" id="selectall_1681768_983444564" aria-label="Select All"><label for="selectall_1681768_983444564"></label></div>
                        </span>
                        <span data-sorttype="filename" tabindex="0"><span>File Name</span><i class="fas fa-caret-up" data-original-title="" title="" role="img" aria-hidden="true"></i><i class="fas fa-caret-down" data-original-title="" title="" role="img" aria-hidden="true"></i></span><span data-sorttype="size" tabindex="0"><span>Size</span><i class="fas fa-caret-up" data-original-title="" title="" role="img" aria-hidden="true"></i><i class="fas fa-caret-down" data-original-title="" title="" role="img" aria-hidden="true"></i></span><span data-sorttype="date" tabindex="0"><span>Date</span><i class="fas fa-caret-up" data-original-title="" title="" role="img" aria-hidden="true"></i><i class="fas fa-caret-down" data-original-title="" title="" role="img" aria-hidden="true"></i></span><span>&nbsp;</span>
                     </li>
                     <li data-filename="TestPdf.pdf" data-size="106" data-date="1678806899778">
                        <div class="ssUploadedFileList-checkbox" style="background-color: #ffffff" tabindex="0"><span>&nbsp;</span><label class="far fa-file-pdf" role="img" aria-hidden="true"></label></div>
                        <span class="ssUploadedFileList-details" style="width:calc(100% - 55px)"><span class="ssUploadedFileList-details-filename"><a class="ssFileURL" href="/files/spool/1524383/10143676/80_1681768_10143676/TestPdf.pdf?fs=1" title="TestPdf.pdf" target="_blank">TestPdf.pdf</a></span><span>106.8 KB - 03/14/2023 11:14AM</span></span>
                        <div class="ssUploadedFileList-buttons">
                           <div class="ssUploadedFileList-options"></div>
                        </div>
                     </li>
                     <li data-filename="aaaaaNIHR150193_-_Progress_Report_-_2023-03-09_-_version_-_2.pdf" data-size="110" data-date="1678806891365">
                        <div class="ssUploadedFileList-checkbox" style="background-color: #ffffff" tabindex="0"><span>&nbsp;</span><label class="far fa-file-pdf" role="img" aria-hidden="true"></label></div>
                        <span class="ssUploadedFileList-details" style="width:calc(100% - 55px)"><span class="ssUploadedFileList-details-filename"><a class="ssFileURL" href="/files/spool/1524383/10143676/80_1681768_10143676/aaaaaNIHR150193_-_Progress_Report_-_2023-03-09_-_version_-_2.pdf?fs=1" title="aaaaaNIHR150193_-_Progress_Report_-_2023-03-09_-_version_-_2.pdf" target="_blank">aaaaaNIHR150193_-_Progress_Report_-_2023-03-09_-_version_-_2.pdf</a></span><span style="margin-top: 10px;">110.7 KB - 03/14/2023 11:14AM</span></span>
                        <div class="ssUploadedFileList-buttons">
                           <div class="ssUploadedFileList-options"></div>
                        </div>
                     </li>
                  </ul>
                  <div class="ssUploadedFileList-footer"><span class="total" style="margin-top: 10px; display: inline-block;">Total Files: 2</span></div>
               </div>
            </td>
         </tr>
      </tbody>
   </table>
</div>

>Solution :

Use last-child instead of last

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

Last only selects one element. See documentation for more details:

https://www.w3schools.com/jquery/sel_last.asp

Also here is a good example of the differences between both:

https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_sel_lastchild_last

$('#titlediv_1683224 li span:last-child').css('margin-top', '10px'); 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="titlediv" name="titlediv_1683224" id="titlediv_1683224">
   <table class="Form" width="100%" cellspacing="0" cellpadding="0" border="0">
      <tbody>
         <tr id="cf_1683223_tr">
            <th id="cf_1683223_th" class="Form" scope="row"><label for="cf_1683223">Signed Application Upload:</label></th>
            <td id="cf_1683223_td" ng-non-bindable="" class="Form textvarfield" name="td1">
               <div class="ssUploadedFileList" data-orderby="filename|asc" id="cf_1681768_container">
                  <ul id="filelist_cf_1681768_983444564" class="pd4ml">
                     <li class="ssUploadedFileList-listViewHeader">
                        <span>
                           <div class="ssCheckBoxContainer"><input type="checkbox" id="selectall_1681768_983444564" aria-label="Select All"><label for="selectall_1681768_983444564"></label></div>
                        </span>
                        <span data-sorttype="filename" tabindex="0"><span>File Name</span><i class="fas fa-caret-up" data-original-title="" title="" role="img" aria-hidden="true"></i><i class="fas fa-caret-down" data-original-title="" title="" role="img" aria-hidden="true"></i></span><span data-sorttype="size" tabindex="0"><span>Size</span><i class="fas fa-caret-up" data-original-title="" title="" role="img" aria-hidden="true"></i><i class="fas fa-caret-down" data-original-title="" title="" role="img" aria-hidden="true"></i></span><span data-sorttype="date" tabindex="0"><span>Date</span><i class="fas fa-caret-up" data-original-title="" title="" role="img" aria-hidden="true"></i><i class="fas fa-caret-down" data-original-title="" title="" role="img" aria-hidden="true"></i></span><span>&nbsp;</span>
                     </li>
                     <li data-filename="TestPdf.pdf" data-size="106" data-date="1678806899778">
                        <div class="ssUploadedFileList-checkbox" style="background-color: #ffffff" tabindex="0"><span>&nbsp;</span><label class="far fa-file-pdf" role="img" aria-hidden="true"></label></div>
                        <span class="ssUploadedFileList-details" style="width:calc(100% - 55px)"><span class="ssUploadedFileList-details-filename"><a class="ssFileURL" href="/files/spool/1524383/10143676/80_1681768_10143676/TestPdf.pdf?fs=1" title="TestPdf.pdf" target="_blank">TestPdf.pdf</a></span><span>106.8 KB - 03/14/2023 11:14AM</span></span>
                        <div class="ssUploadedFileList-buttons">
                           <div class="ssUploadedFileList-options"></div>
                        </div>
                     </li>
                     <li data-filename="aaaaaNIHR150193_-_Progress_Report_-_2023-03-09_-_version_-_2.pdf" data-size="110" data-date="1678806891365">
                        <div class="ssUploadedFileList-checkbox" style="background-color: #ffffff" tabindex="0"><span>&nbsp;</span><label class="far fa-file-pdf" role="img" aria-hidden="true"></label></div>
                        <span class="ssUploadedFileList-details" style="width:calc(100% - 55px)"><span class="ssUploadedFileList-details-filename"><a class="ssFileURL" href="/files/spool/1524383/10143676/80_1681768_10143676/aaaaaNIHR150193_-_Progress_Report_-_2023-03-09_-_version_-_2.pdf?fs=1" title="aaaaaNIHR150193_-_Progress_Report_-_2023-03-09_-_version_-_2.pdf" target="_blank">aaaaaNIHR150193_-_Progress_Report_-_2023-03-09_-_version_-_2.pdf</a></span><span style="margin-top: 10px;">110.7 KB - 03/14/2023 11:14AM</span></span>
                        <div class="ssUploadedFileList-buttons">
                           <div class="ssUploadedFileList-options"></div>
                        </div>
                     </li>
                  </ul>
                  <div class="ssUploadedFileList-footer"><span class="total" style="margin-top: 10px; display: inline-block;">Total Files: 2</span></div>
               </div>
            </td>
         </tr>
      </tbody>
   </table>
</div>
byMR
Published
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Read more

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading