Holen Sie sich das zweite Kind mit jQuery

$(t).html()

kehrt zurück

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

Ich möchte die zweite tdvom $(t)Objekt abrufen . Ich habe nach einer Lösung gesucht, aber nichts hat bei mir funktioniert. Irgendeine Idee, wie man das zweite Element bekommt?

schnapp dir das zweite Kind:

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

oder schnapp dir das zweite Kind <td>:

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

Hier ist eine Lösung, die möglicherweise klarer in Code einzulesen ist:

So erhalten Sie das 2. Kind einer ungeordneten Liste:

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

Und ein ausführlicheres Beispiel: Dieser Code erhält den Text des Attributs 'title' des zweiten untergeordneten Elements der UL, das als 'my_list' identifiziert wurde:

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

In diesem zweiten Beispiel können Sie die 'ul' am Anfang des Selektors entfernen, da sie redundant ist, da eine ID für eine einzelne Seite eindeutig sein sollte. Es dient nur dazu, dem Beispiel Klarheit zu verleihen.

Hinweis zu Leistung und Speicher : Diese beiden Beispiele sind gute Leistungsträger, da sie jquery nicht dazu bringen, eine Liste von ul- Elementen zu speichern , die anschließend gefiltert werden mussten.

Wie ist das:

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

WICHTIGES UPDATE:

Abgesehen davon, wie schön die Antwort aussieht, müssen Sie auch über die Leistung des Codes nachdenken. Daher ist es auch wichtig zu wissen, was genau in der $(t)Variablen enthalten ist. Ist es ein Array von <TD>oder ist es ein <TR>Knoten mit mehreren <TD>sdarin? Weitere Informationen finden Sie in den jsPerf-Ergebnissen in einer <ul>Liste mit 50 <li>Kindern:

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

Die $(t).first().next()Methode ist hier bei weitem die schnellste.

Wenn Sie jedoch den <tr>Knoten nehmen und die untergeordneten Elemente finden <td>und denselben Test ausführen, sind die Ergebnisse nicht dieselben.

Ich hoffe es hilft. :) :)

Ich habe es hier nicht erwähnt gesehen, aber Sie können auch CSS-Spezifikationsselektoren verwenden. Siehe die Dokumente

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

Versuche dies:

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

oder

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

Zusätzlich zur Verwendung von jQuery-Methoden können Sie die native cellsSammlung verwenden, die <tr>Sie erhalten.

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

Angenommen, es thandelt sich um ein DOM-Element, können Sie die Erstellung des jQuery-Objekts umgehen.

t.cells[1].innerHTML

_{Es ist überraschend zu sehen, dass niemand die native JS-Methode erwähnt hat.}

Ohne jQuery:

Greifen Sie einfach auf die childrenEigenschaft des übergeordneten Elements zu. Es wird eine Live-HTMLCollection von untergeordneten Elementen zurückgegeben, auf die über einen Index zugegriffen werden kann. Wenn Sie das zweite Kind bekommen möchten:

parentElement.children[1];

In Ihrem Fall könnte so etwas funktionieren: (Beispiel)

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>

Sie können auch eine Kombination von CSS3-Selektoren / verwenden querySelector()und verwenden :nth-of-type(). Diese Methode funktioniert in einigen Fällen möglicherweise besser, da Sie in diesem Fall auch den Elementtyp angeben können td:nth-of-type(2) (Beispiel).

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

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

Verwenden Sie die .find()Methode

$(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

Sie können in jQuery zwei Methoden verwenden, wie unten angegeben:

Verwenden von jQuery: nth-child Selector Sie haben die Position eines Elements als Argument angegeben, das 2 ist, wenn Sie das zweite li-Element auswählen möchten.

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

Verwenden von jQuery: eq () Selector

Wenn Sie das genaue Element erhalten möchten, müssen Sie den Indexwert des Elements angeben. Ein Listenelement beginnt mit einem Index 0. Um das 2. Element von li auszuwählen, müssen Sie 2 als Argument verwenden.

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

Siehe Beispiel: Zweites untergeordnetes Element der Liste in jQuery abrufen