Question

所以我有一个包含六行的表：

<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（），但没有运气。

Answer 1

使用.next()无效，因为.details不是.current的直接兄弟。使用.closest()不起作用只是因为它从元素本身开始然后向上移动DOM（搜索祖先），而不是在嵌套在同一级别中的兄弟之间。

基本上我们试图模仿CSS中一般兄弟选择器~的行为，但必须首先出现这种情况。因此，我们使用.nextAll()，并将其与.first()配对，返回满足.nextAll()的第一个元素，即

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

jQuery在特定元素之后逐个目标地表

1 个答案: