Get all next element where element has "same" class in series

Question

Just want to select all next elements with same class in series , if class has been changed then stop.

$('.same').click(function () {
    var chosenOne = $(this);
    $('.same').removeClass('color');
    chosenOne.addClass("color");
    chosenOne.nextAll(".same").addClass("color");
});

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

Answer 1

If the other class is always not-same, you can use .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;
}

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

Answer 2

Is this what you need?

$('.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>

Answer 3

Have you tried nextUntil() jQuery function?

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

$('.same').click(function () {
    $('.same').removeClass('color');    
    $(this).addClass("color");
    $(this).nextUntil(':not(.same)').addClass("color");
});

.color {
    color:blue;
    font-weight:bold;
}

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

Answer 4

Here is a little demo of that you want, expect it was.

$('.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);
});