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