Obtenir le deuxième enfant en utilisant jQuery

$(t).html()

Retour

<td>test1</td><td>test2</td>

Je veux récupérer le second tdde l' $(t)objet. J'ai cherché une solution mais rien n'a fonctionné pour moi. Une idée comment obtenir le deuxième élément?

attrape le deuxième enfant:

$(t).children().eq(1);

ou attrapez le deuxième enfant <td>:

$(t).children('td').eq(1);

Voici une solution qui est peut-être plus claire à lire dans le code:

Pour obtenir le 2ème enfant d'une liste non ordonnée:

   $('ul:first-child').next()

Et un exemple plus élaboré: Ce code récupère le texte de l'attribut 'title' du 2ème élément enfant de l'UL identifié comme 'ma_liste':

   $('ul#my_list:first-child').next().attr("title")

Dans ce deuxième exemple, vous pouvez vous débarrasser du 'ul' au début du sélecteur, car il est redondant, car un identifiant doit être unique à une seule page. C'est là juste pour clarifier l'exemple.

Remarque sur les performances et la mémoire , ces deux exemples sont de bons résultats, car ils ne permettent pas à jquery d'enregistrer une liste d' éléments ul qui ont dû être filtrés par la suite.

Comment c'est:

$(t).first().next()

MISE À JOUR MAJEURE:

Outre la beauté de la réponse, vous devez également réfléchir à la performance du code. Par conséquent, il est également utile de savoir ce qu'il y a exactement dans le$(t) variable. Est-ce un tableau de <TD>ou est-ce un <TR>nœud avec plusieurs à l' <TD>sintérieur? Pour illustrer davantage ce point, consultez les scores jsPerf sur une <ul>liste de 50 <li>enfants:

http://jsperf.com/second-child-selector

le $(t).first().next() méthode est de loin la plus rapide.

Mais, d'un autre côté, si vous prenez le <tr>nœud et trouvez les <td>enfants et exécutez le même test, les résultats ne seront pas les mêmes.

J'espère que ça aide. :)

Je ne l'ai pas vu mentionné ici, mais vous pouvez également utiliser des sélecteurs de spécifications CSS. Voir la documentation

$('#parentContainer td:nth-child(2)')

Essaye ça:

$("td:eq(1)", $(t))

ou

$("td", $(t)).eq(1)

En plus d'utiliser les méthodes jQuery, vous pouvez utiliser la cellscollection native que le <tr>.

$(t)[0].cells[1].innerHTML

En supposant qu'il ts'agit d'un élément DOM, vous pouvez contourner la création d'objet jQuery.

t.cells[1].innerHTML

_{Il est surprenant de voir que personne n'a mentionné la manière native JS de faire cela.}

Sans jQuery:

Accédez simplement à la childrenpropriété de l'élément parent. Il renverra une HTMLCollection en direct des éléments enfants auxquels un index peut accéder. Si vous voulez avoir le deuxième enfant:

parentElement.children[1];

Dans votre cas, quelque chose comme ça pourrait fonctionner: (exemple)

var secondChild = document.querySelector('.parent').children[1];

console.log(secondChild); // <td>element two</td>

<table>
    <tr class="parent">
        <td>element one</td>
        <td>element two</td>
    </tr>
</table>

Vous pouvez également utiliser une combinaison de sélecteurs CSS3 / querySelector()et utiliser :nth-of-type(). Cette méthode peut fonctionner mieux dans certains cas, car vous pouvez également spécifier le type d'élément, dans ce cas td:nth-of-type(2) (exemple)

var secondChild = document.querySelector('.parent > td:nth-of-type(2)');

console.log(secondChild); // <td>element two</td>

Utiliser la .find()méthode

$(t).find("td:eq(1)");

td:eq(x) // x is index of child you want to retrieve. eq(1) means equal to 1. //1 denote second element

Vous pouvez utiliser deux méthodes dans jQuery comme indiqué ci-dessous:

Utilisation de jQuery: nth-child Selector Vous avez mis la position d'un élément comme argument qui vaut 2 comme vous voulez sélectionner le deuxième élément li.

$( "ul li:nth-child(2)" ).click(function(){
  //do something
});

Utilisation de jQuery: eq () Selector

Si vous souhaitez obtenir l'élément exact, vous devez spécifier la valeur d'index de l'élément. Un élément de liste commence par un index 0. Pour sélectionner le 2ème élément de li, vous devez utiliser 2 comme argument.

$( "ul li:eq(1)" ).click(function(){
  //do something
});

Voir Exemple: Obtenir le deuxième élément enfant de la liste dans jQuery