Le sélecteur jquery children() ne sélectionne pas l'élément correct

Question

J'utilise jquery pour essayer de sélectionner un élément dans un tableau simple. Quand j'appelle quelque chose comme

$('.broadcast_item_even').mouseover(function(event) { 

    //SET TR GLOW EFFECT 
    $(this).attr('class', 'broadcast_item_hover'); 

    //ALERT THE VALUE 
    alert($(this).children(2).html()); 

}); 

sur cet objet de table

<table style="color: rgb(0, 0, 255);" id="Table1"> 
    <tbody> 
     <tr class="broadcast_item_even"> 
      <td> 
       <img height="50px" width="50px" alt="user avatar" src="../../Avatar/default-user.jpg"> 

      </td> 
      <td>     
       jimbo60 
      </td> 

      <td> 
       10.8 miles 
      </td> 

     </tr> 
    <tbody> 
</table> 

les impressions de résultats

<img height="50px" width="50px" alt="user avatar" src="../../Avatar/default-user.jpg"> 

et non

10.8 miles 

qui est ce que je me attends. Quelqu'un at-il une idée de la raison pour laquelle cela pourrait se produire? Si oui, toute aide serait grandement appréciée.

Answer 1

Si vous voulez que le troisième enfant dont vous avez besoin :eq(2) ou .eq(2), comme ceci:

$(this).children().eq(2).html() 
//or: 
$(this).children(":eq(2)").html() 

You can test it out here. La fonction .children() prend un sélecteur, pas un index.

Answer 2

Essayez $(this).children('td:last').html()

Answer 3

Vous cal également utiliser le code suivant pour obtenir le texte du troisième td.

alerte ($ (this) .find ("td"). Eq (2) .html());