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遇到每个divs 遇到的第一个.

这是一个使用示例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

使用选择器 :has() 像：

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

在此处查找 jQuery 文档:has() 选择器

Answer 3

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

这正是您想要的。