jQuery - 按子类选择父类？

Question

如何选择 <tr>包含 child <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 将在每个 div 遇到的第一个 tr 处停止。

这是一个使用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);
  }
});

输出:

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