web-dev-qa-db-fra.com

Obtenir un deuxième enfant en utilisant jQuery

$(t).html()

résultats 

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

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

jqueryjquery-selectors
162
Artjom Zabelin

prenez le deuxième enfant:

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

ou, prenez le deuxième enfant <td>:

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

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

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

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

Et un exemple plus élaboré: Ce code obtient le texte de l’attribut 'title' du deuxième élément enfant de la UL identifié comme 'my_list':

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

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

Remarque sur Performances et mémoire , ces deux exemples sont performants, car ils ne permettent pas à jQuery de sauvegarder une liste de ul éléments à filtrer par la suite.

24
stackex

Comment c'est:

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

MAJOR UPDATE:

Outre la beauté de la réponse, vous devez également prendre en compte les performances du code. Par conséquent, il est également important de savoir ce qui se trouve exactement dans la variable $(t). Est-ce un tableau de <TD> ou est-ce un nœud <TR> avec plusieurs <TD>s à l'intérieur? Pour illustrer ce point, voyez les scores de jsPerf sur un <ul> liste avec 50 <li> enfants:

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

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

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

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

20
kumar_harsh

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)')
10
Just Plain High

Essaye ça:

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

ou

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

En plus d'utiliser les méthodes jQuery, vous pouvez utiliser la collection native cells fournie par le <tr>.

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

En supposant que t est un élément DOM, vous pouvez ignorer la création d'objet jQuery.

t.cells[1].innerHTML
7
user113716

Il est étonnant de voir que personne ne mentionne la façon dont le JS autochtone fait cela.

Sans jQuery:

Accédez simplement à la children propriété de l'élément parent. Il retournera un HTMLCollection en direct é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 ceci 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 mieux fonctionner 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>
3
Josh Crozier