jQuery - select parent by child class?

Question

How can I select the <tr> containing the child <div class="test">, as below?

<table>   <tr> <!-- this tr is what I want to select -->     <td>       <div class="test"> text </div>     </td>   </tr> </table> 

Answer 1

You can use parents or closest for that, depending on your needs:

$("div.test").parents("tr"); // Or $("div.test").closest("tr"); 

(The initial selector can be anything that matches your div, so ".test" would be fine too.)

parents will look all the way up the tree, possibly matching multiple tr elements if you have a table within a table. closest will stop with the first tr it encounters for each of the divs.

Here's an example using closest:

Live copy | Live source

HTML:

<table>   <tr id="first"> <!-- this tr I want to select -->     <td>       <div class="test"> text </div>     </td>   </tr>   <tr id="second"> <!-- this tr I want to select -->     <td>       <div class="test"> text </div>     </td>   </tr>   <tr id="third"> <!-- this tr I want to select -->     <td>       <div class="test"> text </div>     </td>   </tr> </table> 

JavaScript:

jQuery(function($) {    var rows = $("div.test").closest("tr");   display("Matched " + rows.length + " rows:");   rows.each(function() {     display("Row '" + this.id + "'");   });    function display(msg) {     $("<p>").html(msg).appendTo(document.body);   } }); 

Output:

Matched 3 rows: Row 'first' Row 'second' Row 'third'

Answer 2

Use selector :has() like:

$("tr:has(div.test)"); 

Find jQuery documentation here :has() Selector