How to select first child of parent by using ID of a child element?

Question

I try to select the td element which contains "Text1" without giving this td element an ID. So "Text1" should have a background color of red at the end. I tried it like this, but this does not work.

 $("#test").parent().closest("td").css("background-color", "red"); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td> <p> Text1 </p> </td> <td id="test"> <p> Text2 </p> </td> </tr> </table> 

https://jsfiddle.net/8wyuggxz/

Answer 1

Use :contains selector

 $('td:contains("Text1")').css("background-color", "red"); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td> <p> Text1 </p> </td> <td id="test"> <p> Text2 </p> </td> </tr> </table> 

Answer 2

You can use prev() method like following.

 $("#test").prev('td').css("background-color", "red"); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td> <p> Text1 </p> </td> <td id="test"> <p> Text2 </p> </td> </tr> </table> 

Answer 3

Edit : Here's a JS solution using the ID :

See this working fiddle

$("#test").parent().find("td:first-child").css("background-color", "red");

Answer 4

Try like this:

$("#test").parent().children("td:nth-child(1)").css("background-color", "red");

working codepen: http://codepen.io/anon/pen/wGMZYG

Answer 5

1. How to select first child of parent by using ID of a child element?

2. I try to select the td element which contains "Text1"

Solution for the both the queries.

Code snippets:

$("#test").parent().children('td:first:contains("Text1")').css("background-color", "red");

FIDDLE DEMO