Deuxième enfant à l'aide de jQuery

$(t).html()

retourne 

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

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

InformationsquelleAutor Upvote | 2011-01-18
  1. 323

    saisir le deuxième enfant:

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

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

    $(t).children('td').eq(1);
    • Quelle est la différence entre $(t).children('td').eq(1) et $(t).children()[1]
    • eh bien pour commencer, la première retourne un objet jQuery, la seconde renvoie un objet de Nœud
    • N'est-ce aussi travailler pour le find() méthode jQuery? Comme dans $(t).find('td').eq(1) pour obtenir le deuxième <td>, si t était, disons, une table et j'ai besoin de regarder vers le bas plus de 1 nœud?
    • Je ne pouvais pas obtenir .children('td').eq(1) de travailler pour une raison quelconque, mais .find('td').eq(1) a très bien fonctionné.
    InformationsquelleAutor davin
  2. 25

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

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

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

    Et plus élaboré exemple:
    Ce code récupère le texte de l'attribut "title" de la 2ème élément enfant de l'UL identifiée comme "my_list':

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

    Dans ce deuxième exemple, vous pouvez vous débarrasser de la " ul " au début de la sélection, comme c'est redondant, car un ID doit être unique dans une page unique.
    Il est là juste pour ajouter de la clarté à l'exemple.

    Note sur de la Performance et de la Mémoire, ces deux exemples sont de bons performants, car ils ne font pas jquery enregistrer une liste de ul les éléments qui devaient être filtrée par la suite.

    • Alors que nous nous soucions de la performance, nous allons aller de l'avant et de garder une référence à la ul de sorte que nous n'aurons pas à le rechercher.
    InformationsquelleAutor stackex
  3. 22

    Comment est-ce:

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

    MISE À JOUR MAJEURE:

    En dehors de la beauté de la réponse ressemble, vous devez également donner une pensée à l'exécution du code. Par conséquent, il est également relavant de savoir ce qui est exactement dans la $(t) variable. Est-il un tableau de <TD> ou est-il un <TR> nœud avec plusieurs <TD>s à l'intérieur?
    Pour illustrer ce point, voir le jsPerf les scores sur une <ul> liste avec 50 <li> enfants:

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

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

    Mais, d'autre part, si vous prenez le <tr> nœud et de trouver la <td> les enfants et les et exécuter le même test, les résultats ne seront pas les mêmes.

    Espère que cela aide. 🙂

    InformationsquelleAutor kumarharsh
  4. 15

    Je ne le vois pas mentionné ici, mais vous pouvez également utiliser CSS sélecteurs. Voir les docs

    $('#parentContainer td:nth-child(2)')
    InformationsquelleAutor Just Plain High
  5. 9

    Essayez ceci:

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

    ou

    $("td", $(t)).eq(1)
    InformationsquelleAutor Chandu
  6. 8

    En outre à l'aide de méthodes jQuery, vous pouvez utiliser le natif cells de la collection que la <tr> vous donne.

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

    En supposant t est un élément du DOM, vous pouvez contourner le jQuery création de l'objet.

    t.cells[1].innerHTML
    InformationsquelleAutor user113716
  7. 3

    Il est surprenant de voir que personne n'a mentionné le natif JS façon de le faire..

    Sans jQuery:

    Simplement accéder à la enfants de la propriété de l'élément parent. Il sera de retour une vivre HTMLCollection des enfants à des éléments qui peuvent être accessibles par un index. Si vous voulez obtenir le deuxième enfant:

    parentElement.children[1];

    Dans votre cas, quelque chose comme cela 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 d'utiliser :nth-of-type(). Cette méthode peut mieux fonctionner dans certains cas, parce que 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>
    InformationsquelleAutor Josh Crozier
  8. 0

    Utilisation .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

    • <table> <tr class="parent"> <td>un élément</td> <td>élément deux</td> </tr> </table>
    • Si l'info dans votre commentaire est pertinent pour votre réponse, s'il vous plaît ajouter les détails de votre poste via le Modifier. De toute façon, s'il vous plaît supprimer votre commentaire.
    InformationsquelleAutor