Get second child using jQuery

问题:

$(t).html()

returns

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

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

回答1:

grab the second child:

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

or, grab the second child <td>:

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

回答2:

Here's a solution that maybe is clearer to 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 add clarity to the example.

Note on Performance and Memory, these two examples are good performants, because they don't make jquery save a list of ul elements that had to be filtered afterwards.

回答3:

How's this:

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

---

MAJOR UPDATE:

Apart from how beautiful the answer looks, you must also give a thought to the performance of the code. Therefore, it is also relavant to know what exactly is in the $(t) variable. Is it an array of <TD> or is it a <TR> node with several <TD>s inside it? To further illustrate the point, see the jsPerf scores on a <ul> list with 50 <li> children:

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

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

But, on the other hand, if you take the <tr> node and find the <td> children and and run the same test, the results won't be the same.

Hope it helps. :)

回答4:

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

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

回答5:

Try this:

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

or

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

回答6:

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

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

Assuming t is a DOM element, you could bypass the jQuery object creation.

t.cells[1].innerHTML

回答7:

_{It's surprising to see that nobody mentioned the native JS way to do 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 to 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); // <td>element two</td>

<table>
    <tr class="parent">
        <td>element one</td>
        <td>element two</td>
    </tr>
</table>

You can also use a combination of CSS3 selectors / querySelector() and 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); // <td>element two</td>

回答8:

Use .find() method

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