j查询到特定元素后按类逐行目标表

jQuery to target table row by class after specific element

本文关键字：逐行 目标 元素 查询      更新时间：2023-09-26

所以我有一个有六行的表格：

<table>
    <tr class="current">
        <td>1</td>
    </tr>
    <tr>
        <td>2</td>
    </tr>
    <tr class="details">
        <td>3</td>
    </tr>
    <tr>
        <td>1</td>
    </tr>
    <tr>
        <td>2</td>
    </tr>
    <tr class="details">
        <td>6</td>
    </tr>
</table>

我想做的是使用 class="details" 定位行。由于页面上有多个带有该类的行，因此我需要定位类"current"之后的行。

我尝试过使用 .find（） 和 .closest（），但由于我的目标不是祖先或后代，因此它们不起作用。我也尝试使用.next（），但没有任何运气。

使用 .next() 不起作用，因为.details不是.current的直系兄弟。使用 .closest() 不起作用，因为它从元素本身开始，然后沿着 DOM（搜索祖先）向上移动，并且不会在同一级别嵌套的同级中查找。

基本上，我们试图模拟CSS中通用兄弟选择器~的行为，除了必须是第一次出现。因此，我们使用 .nextAll() ，并将其与返回满足.nextAll()的第一个元素的 .first() 配对，即

// jQuery-based DOM transversal
$('.current').nextAll('.details').first();

你当然可以使用CSS，但我怀疑这会降低效率。此外，通过使用CSS选择器，您将无法通过链接其他方法来横向DOM：

// CSS-based selection
$('.current ~ .details:first');


$(function() {
  $('.current').nextAll('.details').first().css('background-color','#eee');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr class="current">
        <td>1</td>
    </tr>
    <tr>
        <td>2</td>
    </tr>
    <tr class="details">
        <td>3</td>
    </tr>
    <tr>
        <td>1</td>
    </tr>
    <tr>
        <td>2</td>
    </tr>
    <tr class="details">
        <td>6</td>
    </tr>
</table>

相关文章：