'jQuery - select parent by child class?

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>
jquerydom


Solution 1:[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'

Solution 2:[2]

Use selector :has() like:

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

Find jQuery documentation here :has() Selector

Solution 3:[3]

$('.test').parent('tr')

this selects exactly what you want.

Solution 4:[4]

you should use 

$('.test').parents('tr');

For Example:

http://jsfiddle.net/7T9nN/

Solution 5:[5]

The below targets the parent with class of .test somewhere within its children and in the below example changes background to red...

$(document).ready(function(){
$('.test').parents('tr').css('background-color', 'red');
});

For me this is extremely powerful when trying to target exported html from indesign. Powerful because indesign does not let you tag 's but through this you can tag a and then the through this JQuery.

Solution 6:[6]

$('.test').parent().parent(); or $('.text').parent().closest('tr');

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 smonff
Solution 2 Iakovos Exadaktylos
Solution 3
Solution 4 sinanakyazici
Solution 5 Baby Groot
Solution 6 user1248376

Related Questions