获取元素在系列中具有“相同”类的所有下一个元素

时间:2017-07-13 10:27:45

标签: javascript jquery

只想在系列中选择具有相同类的所有下一个元素,如果已更改类,则停止。

$('.accordion-head').on("click", function (){
    $(this).find('a').trigger("click");
});
$('.same').click(function () {
    var chosenOne = $(this);
    $('.same').removeClass('color');
    chosenOne.addClass("color");
    chosenOne.nextAll(".same").addClass("color");
});
.color {
    color:blue;
    font-weight:bold;
}

4 个答案:

答案 0 :(得分:7)

如果其他课程始终为WHERE (due = lastdue and paidamt - dueamt > 1) OR (due <> lastdue and paidamt - (dueamt + nxtduedt) > 1) ,您可以使用not-same

.nextUntil()
$('.same').click(function () {
    var chosenOne = $(this);
    $('.same').removeClass('color');
    chosenOne.addClass("color");
    chosenOne.nextUntil(".not-same").addClass("color");
});
.color {
    color:blue;
    font-weight:bold;
}

答案 1 :(得分:2)

这是你需要的吗?

$('.same').click(function () {
    var chosenOne = $(this);
    $('.same').removeClass('color');
    chosenOne.addClass("color");
    //chosenOne.nextAll(".same").addClass("color");
    while(chosenOne.next('div').hasClass('same')){
      chosenOne.next(".same").addClass("color");
      chosenOne = chosenOne.next("div");
    }
});
.color {
    color:blue;
    font-weight:bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>
    <div class="same">Text</div>
    <div class="same">Text</div>
    <div class="same">Text</div>
    <div class="not-same">Stop here</div>
    <div class="same">Text</div>
    <div class="same">Text</div>
</div>

答案 2 :(得分:1)

您是否尝试过nextUntil()jQuery函数?

$('.same').nextUntil(':not(.same)').addClass('color');

&#13;
&#13;
$('.same').click(function () {
    $('.same').removeClass('color');    
    $(this).addClass("color");
    $(this).nextUntil(':not(.same)').addClass("color");
});
&#13;
.color {
    color:blue;
    font-weight:bold;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <div class="same">Text</div>
    <div class="same">Text</div>
    <div class="same">Text</div>
    <div class="not-same">Stop here</div>
    <div class="same">Text</div>
    <div class="same">Text</div>
</div>
&#13;
&#13;
&#13;

答案 3 :(得分:0)

这是你想要的一点demo,期待它。

$('.same').click(function () {
    var _elms = $(this).parent().children();
    var _class = $(this).attr('class');
    for(var i=0;i<_elms.length;i++){
        console.log(_elms[i]);
      var el = $(_elms[i]);
        el.addClass('color');

        if(!el.hasClass(_class)){
        break;
      }
    }
    console.log(_class);
});