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选择器，如下所示

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

为什么你想要一行？只需将它分成两部分，就会更简单。

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

顺便说一句，当您的代码有一个类#myelement时，您调用了myelement。应该使用.myelement调用它。容器是一个id #container

Answer 3

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

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

使用#container定位父parents()。这不会为span内td提供任何内容。然后使用table定位其兄弟tr和第一个eq(0)。

Answer 4

使用 .myelement 而非 #myelement

调用类元素

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

或

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

jQuery选择最接近

4 个答案: