JQuery - выберите родительский класс?

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

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

Ответы

Ответ 1

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

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

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

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

Вот пример использования 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'

Ответ 2

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

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

Ответ 3

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

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

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

Ответ 5

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

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

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

Ответ 6

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