Obtenir le deuxième enfant en utilisant jQuery

$(t).html() 

résultats

 test1test2 

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

prends le deuxième enfant:

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

ou, prenez le deuxième enfant

:

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

Voici une solution plus lisible 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 obtient le texte de l’atsortingbut ‘title’ du 2ème élément enfant de l’UL identifié comme ‘my_list’:

  $('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 pour une seule page. C’est juste pour append de la clarté à l’exemple.

Remarque sur les performances et la mémoire , ces deux exemples sont performants, car ils ne permettent pas à jquery d’enregistrer une liste d’éléments à filtrer par la suite.

Comment c’est:

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

MISE À JOUR MAJEURE:

En dehors de la beauté de la réponse, vous devez également réfléchir à la performance du code. Par conséquent, il est également préférable de savoir ce que contient exactement la variable $(t) . Est-ce un tableau de

ou s’agit-il d’un noeud

avec plusieurs

s

intérieur? Pour mieux illustrer ce point, voir les scores jsPerf sur une liste

    avec 50 enfants

  • :

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

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

    Mais d’un autre côté, si vous prenez le noeud

    et trouvez les enfants

    et exécutez le même test, les résultats ne seront pas les mêmes.

    J’espère que cela aide. 🙂

    Je ne l’ai pas vu mentionné ici, mais vous pouvez également utiliser les sélecteurs de spécifications CSS. Voir les docs

     $('#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 de cells natives que vous fournit

    .

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

    En supposant que t soit un élément DOM, vous pouvez contourner la création de l’object jQuery.

     t.cells[1].innerHTML 

    Il est surprenant de voir que personne n’a mentionné la méthode JS native pour ce faire.

    Sans jQuery:

    Accédez simplement à la propriété children de l’élément parent. Il renverra en direct un HTMLCollection d’éléments enfants accessible par un index. 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); // element two 
     
    element one element two

    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); // element two 

    Utiliser la méthode .find()

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

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