jquery - 将类添加到 jquery 中的第一个和最后一个元素

Question

我想使用 jQuery 将一个类添加到两个“.heading”类之间的第一个和最后一个“.sub”。

    <table>
        <tr class="heading"></tr>
        <tr class="sub top-box"></tr>
        <tr class="sub"></tr>
        <tr class="sub bottom-box"></tr>
        <tr class="heading"></tr>
        <tr class="sub top-box"></tr>
        <tr class="sub"></tr>
        <tr class="sub"></tr>
        <tr class="sub"></tr>
        <tr class="sub bottom-box"></tr>
    </table>

我尝试了这个，但不起作用:

    jQuery('.heading').click(function(e) {
        e.preventDefault();

        jQuery('.sub:first').nextUntil('.heading').toggleClass('top-box');
        jQuery('.sub:last').nextUntil('.heading').toggleClass('bottom-box');
    });

Answer 1

您可以使用 :first/:last 选择器以及 prev()/next() 方法。

$('.heading:first').next('.sub').addClass("top-box")
$('.heading:last').prev('.sub').addClass("bottom-box")

.top-box{
  background-color:yellow
}
.bottom-box{
  background-color:green
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr class="heading"><td>heading</td></tr>
    <tr class="sub "><td>sub1</td></tr>
    <tr class="sub"><td>sub</td></tr>
    <tr class="sub "><td>sub</td></tr>
    <tr class="heading"><td>heading</td></tr>
    <tr class="sub"><td>sub2</td></tr>
    <tr class="sub"><td>sub</td></tr>
    <tr class="sub"><td>sub</td></tr>
    <tr class="sub"><td>sub</td></tr>
    <tr class="sub"><td>sub</td></tr>
</table>