Demo of using nextUntil

Answering Stack Overflow question. Basically how to use .nextUntil in a certain situation.

by Brenton Strine

HTML

<ul>
    <li class="blue moveMeDown">1</li>
    <li class="blue">2</li>
    <li class="blue">3</li>
    <li class="blue">4</li>
    <li class="blue">5</li>
    <li class="blue">6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
</ul>
On click, the green guy will be moved below all the blue guys, but above the reds.

CSS

li {
    border: solid 2px red; 
}
.blue {
    border: solid 2px blue;
}
.moveMeDown {
    border: dotted 2px green;
}

JavaScript

$("ul").on("click", ".moveMeDown", function(e){           
    var $elm = $(this);
        $elm.insertAfter($elm.nextUntil(":not(.blue)").last()).removeClass("blue");
    
});