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

//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

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>

Leave a Reply