jQuery - выбрать родителя по дочернему классу?

Question

Как выбрать <tr>, содержащий ребенка <div class="test">, как показано ниже?

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

Answer 1

Для этого вы можете использовать parents или closest, в зависимости от ваших потребностей:

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

(Первоначальный селектор может быть любым, что соответствует вашему div, поэтому ".test" тоже подойдет.)

parents будет искать все дерево вверх, возможно, сопоставляя несколько элементов tr, если у вас есть таблица в таблице. closest остановится с первым tr, с которым он столкнется для каждого из div s.

Вот пример использования closest:

Живая копия | Живой источник

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);
  }
});

Выход:

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

Answer 2

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

это выбирает именно то, что вы хотите.

Answer 3

Использовать селектор: has (), как:

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

Найти документацию по jQuery здесь : has () Селектор

Answer 4

Ниже указывается родительский объект с классом .test где-то в его дочерних элементах, а в приведенном ниже примере фон меняется на красный ...

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

Для меня это очень важно при попытке нацелить экспортированный HTML из indesign. Мощно, потому что indesign не позволяет вам помечать теги, но с помощью этого вы можете пометить тегом a, а затем и через этот JQuery.

Answer 5

Вы должны использовать

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

Например:

http://jsfiddle.net/7T9nN/

Answer 6

$('.test').parent().parent(); или $('.text').parent().closest('tr');