How to select this specific td element and its text with Jquery

Question

I want to change the \"Yes! Pick me\" into \"Picked\" with Jquery in the following HTML structure, I used $(\'#myDiv>table>tr>td>table>tr\').eq(1).text(

Answer 1

The main problem is that you want .eq(0) not .eq(1) as .eq() is 0-based, and you are not selecting the td, only the tr.

Other than that using > direct descendant selectors makes your selection not very robust at all.

Try $('#myDiv table table td').eq(0).text('Picked');

Answer 2

Your child selector query won't work because HTML5 requires the parser to insert <tbody> elements inside your <table> elements, since you've forgotten to put them in yourself. Perhaps you should consider validating your HTML?

Answer 3

Try this:

$("#myDiv table table td:first").text("Picked")

Answer 4

$('#myDiv').find('table table td').eq(0).text(...);

Start your selection at the #myDiv element ($('#myDiv')), then find all the TD element that are inside a table that is inside another table (.find('table table td')), then only alter the first one (.eq(0)).

Documentation:

• .find(): http://api.jquery.com/find
• .eq(): http://api.jquery.com/eq

Answer 5

You can try:

$("td:contains('Yes! Pick me!')").text("Picked"); ​

Answer 6

You can use the :contains(text) selector

$('#myDiv td table td:contains(Yes! Pick me!)').text('Picked');

Be careful with nested tables however because if you were to use just

$('#myDiv td:contains(Yes! Pick me!)').text('Picked');

You would get both the cell your after plus the cell it is nested within.