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:

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

MAJOR UPDATE:

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:

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

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.

t.cells<1>.innerHTML
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