$(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?
This question is related to
jquery
jquery-selectors
You can use two methods in jQuery as given below-
Using jQuery :nth-child Selector You have put the position of an element as its argument which is 2 as you want to select the second li element.
$( "ul li:nth-child(2)" ).click(function(){_x000D_
//do something_x000D_
});
_x000D_
Using jQuery :eq() Selector
If you want to get the exact element, you have to specify the index value of the item. A list element starts with an index 0. To select the 2nd element of li, you have to use 2 as the argument.
$( "ul li:eq(1)" ).click(function(){_x000D_
//do something_x000D_
});
_x000D_
See Example: Get Second Child Element of List in jQuery
I didn't see it mentioned here, but you can also use CSS spec selectors. See the docs
$('#parentContainer td:nth-child(2)')
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
How's this:
$(t).first().next()
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:
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. :)
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
Try this:
$("td:eq(1)", $(t))
or
$("td", $(t)).eq(1)
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.
It's surprising to see that nobody mentioned the native JS way to do this..
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>
Source: Stackoverflow.com