$(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?
prenez le deuxième enfant:
$(t).children().eq(1);
ou, prenez 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 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.
Comment c'est:
$(t).first().next()
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:
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. :)
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 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
Il est étonnant de voir que personne ne mentionne la façon dont le JS autochtone fait cela.
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>