Get The Second Child Using Jquery

test1test2I want to retrieve the second td from the $(t) object. I searched for a solution but nothing worked for me. Any idea how to lớn get the second element?



Highest score (default) Trending (recent votes count more) Date modified (newest first) Date created (oldest first)
grab the second child:

$(t).children().eq(1);or, grab the second child :

$(t).children("td").eq(1);See documentation for children và eq.

Bạn đang xem: Get the second child using jquery



I didn"t see it mentioned here, but you can also use CSS spec selectors. See the docs

$("#parentContainer td:nth-child(2)")
Here"s a solution that maybe is clearer to lớn read in code:

To get the 2nd child of an unordered list:

$("ul:first-child").next()And a more elaborated example:This code gets the text of the "title" attribute of the 2nd child element of the UL identified as "my_list":

$("ul#my_list:first-child").next().attr("title")In this second example, you can get rid of the "ul" at the start of the selector, as it"s redundant, because an ID should be unique to a single page. It"s there just to địa chỉ clarity to lớn the example.

Note on Performance và Memory, these two examples are good performants, because they don"t make jquery save a danh mục of ul elements that had to be filtered afterwards.


How"s this:



Apart from how beautiful the answer looks, you must also give a thought khổng lồ the performance of the code. Therefore, it is also relavant lớn know what exactly is in the $(t) variable. Is it an array of or is it a node with several s inside it?To further illustrate the point, see the jsPerf scores on a menu with 50 children:

The $(t).first().next() method is the fastest here, by far.

Xem thêm: paula's choice review

But, on the other hand, if you take the node and find the children & and run the same test, the results won"t be the same.

Hope it helps. :)

In addition to using jQuery methods, you can use the native cells collection that the gives you.

$(t)<0>.cells<1>.innerHTMLAssuming t is a DOM element, you could bypass the jQuery object creation.

It"s surprising khổng lồ see that nobody mentioned the native JS way to vày this..

Without jQuery:

Just access the children property of the parent element. It will return a live HTMLCollection of children elements which can be accessed by an index. If you want lớn get the second child:

parentElement.children<1>;In your case, something like this could work: (example)

var secondChild = document.querySelector(".parent").children<1>;console.log(secondChild); // element two

element one element two
You can also use a combination of CSS3 selectors / querySelector() và utilize :nth-of-type(). This method may work better in some cases, because you can also specifiy the element type, in this case td:nth-of-type(2) (example)

var secondChild = document.querySelector(".parent > td:nth-of-type(2)");console.log(secondChild); // element two