jQuery - 按子类选择父级？

Question

如何选择包含孩子<tr>的{​​{1}}，如下所示？

<div class="test">

Answer 1

根据您的需要，您可以使用parents或closest：

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

（初始选择器可以是与div匹配的任何内容，因此".test"也可以。）

parents将在树中向上看，如果表中有表，则可能匹配多个tr元素。对于每个closest s tr，div会遇到closest。

以下是使用<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> 的示例：

Live copy | Live source

HTML：

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

JavaScript的：

{{1}}

输出：

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

Answer 2

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

这会精确地选择你想要的东西。

Answer 3

使用selector：has（）like：

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

在此处查找jQuery文档:has() Selector

Answer 4

你应该使用

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

例如：

http://jsfiddle.net/7T9nN/

Answer 5

下面的目标是父类，其子类中包含.test，在下面的示例中将背景更改为红色......

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

对我来说，当尝试从indesign定位导出的html时，这非常强大。功能强大，因为indesign不会让你标记，但通过这个你可以标记a然后通过这个JQuery。

Answer 6

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