Wie kann ich den Wert des letzten th bekommen?

Question

Ich muss das Wort Emails auf einen Klick auf alle Kontrollkästchen drucken. Wie kann ich das machen? Hier ist meine HTML-Struktur:

$('td input').on('change', function() { 
 
    var header_name = $(this).closests('tr').sibilings('th').last().text(); 
 
    console.log(header_name); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tbody> 
 
    <tr> 
 
     <th><input type="checkbox" class="all_checkboxes"></th> 
 
     <th>Emails</th> 
 
    </tr> 
 
    <tr> 
 
     <td><input type="checkbox" data-id="email"></td> 
 
     <td>email</td> 
 
    </tr> 
 
    <tr> 
 
     <td><input type="checkbox" data-id="gmail"></td> 
 
     <td>gmail</td> 
 
    </tr> 
 
    <tr> 
 
     <td><input type="checkbox" data-id="aol"></td> 
 
     <td>aol</td> 
 
    </tr> 
 
    <tr> 
 
     <td><input type="checkbox" data-id="chmail"></td> 
 
     <td>chmail</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 1

Erstens haben Sie ein paar Tippfehler. closests() sollte closest() sein und sibilings() muss siblings() sein.

Das Problem selbst ist, weil Ihr DOM-Traversal nicht korrekt ist. Sie versuchen, Geschwister th der Eltern tr auf die geklickte input zu betrachten, wenn die th, die Sie anstreben, in einer ganz anderen Reihe ist.

dies beheben Sie closest() bekommen die table, dann find() die tr:last, wie diese verwendet werden soll:

$('td input').on('change', function() { 
 
    var header_name = $(this).closest('table').find('th:last').text(); 
 
    console.log(header_name); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tbody> 
 
    <tr> 
 
     <th><input type="checkbox" class="all_checkboxes"></th> 
 
     <th>Emails</th> 
 
    </tr> 
 
    <tr> 
 
     <td><input type="checkbox" data-id="email"></td> 
 
     <td>email</td> 
 
    </tr> 
 
    <tr> 
 
     <td><input type="checkbox" data-id="gmail"></td> 
 
     <td>gmail</td> 
 
    </tr> 
 
    <tr> 
 
     <td><input type="checkbox" data-id="aol"></td> 
 
     <td>aol</td> 
 
    </tr> 
 
    <tr> 
 
     <td><input type="checkbox" data-id="chmail"></td> 
 
     <td>chmail</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 2

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<table> 
    <tbody> 
     <tr> 
      <th><input type="checkbox" class="all_checkboxes"></th> 
      <th>Emails</th> 
     </tr> 
     <tr> 
      <td><input type="checkbox" data-id="email"></td> 
      <td>email</td> 
     </tr> 
     <tr> 
      <td><input type="checkbox" data-id="gmail"></td> 
      <td>gmail</td> 
     </tr> 
     <tr> 
      <td><input type="checkbox" data-id="aol"></td> 
      <td>aol</td> 
     </tr> 
     <tr> 
      <td><input type="checkbox" data-id="chmail"></td> 
      <td>chmail</td> 
     </tr> 
    </tbody>  
</table> 
<script> 
    $('td input, th input').on('change', function(){ 
     var header_name = $("tr:first").last().text(); 
     console.log(header_name); 
    }) 
</script>