jQuery选择所有最接近的子代

Question

我想将.red-border类添加到#container div中，并将所有<td>都添加到最近的<tr> 。

但是通过使用.closest（），我只能获得元素的直接父元素<td> 。

有没有一种方法可以针对最接近的<tr>所有子级？

我的代码如下。

我当前的错误JS：

$('#myelement').closest('.container, tr td').addClass('red-border');

显然，这仅针对1 td 。 我想涵盖所有这些。

我的HTML：

<div id="container">
 <span class="myelement">element</span>
</div>

<table>
  <tr>
    <td></td>
    <td><span class="myelement">element</span></td>
    <td></td>
  </tr>
</table>

编辑：通常我可能会使用.find()函数，但这不能与or运算符一起使用。

Answer 1

我希望这就是您的期望。 你需要通过每个迭代tr ，并添加red-border类的第一个td与td:first选择如下

 $(document).ready(function() { $('#container').addClass('red-border'); $('tr').each(function(){ $(this).find('td:first').addClass('red-border'); }) }) 

 .red-border{ border:red 2px solid; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="container"> <span class="myelement">element</span> </div> <table> <tr> <td>First row First TD</td> <td><span class="myelement">element</span> </td> <td></td> </tr> <tr> <td>Second row First TD</td> <td><span class="myelement">element</span> </td> <td></td> </tr> </table> 

Answer 2

为什么要单行显示？ 只需将其拆分为两个，就会更简单。

$('.myelement').closest('#container').addClass('red-border');
$('.myelement').closest('tr').find('td').addClass('red-border');

顺便说一句，当标签具有class myelement时，您调用了#myelement 。 应该使用.myelement来调用它。 容器是一个ID，所以#container

Answer 3

根据您的结构，您可以这样做：

$(".myelement").parents("#container").addClass('red-border').siblings("table").find("tr").eq(0).children().addClass('red-border');

使用parents()定位父#container 。 这对于td内的span没有任何帮助。 然后使用eq(0)定位其兄弟table和第一个tr 。

Answer 4

使用.myelement而不是#myelement调用类元素

$('.myelement').closest('.container, tr td').css({"color": "red", "border": "2px solid red"});

要么

$('.myelement').closest('.container, tr td').addClass('red-border');