CODEWITHSUNDEEP
javascriptjqueryhtml
r3plica
r3plica

Reputation: 13367

Get elements between 2 elements

I have this html:

<div class="categories">
    <div class="list-group">
        <a class="root list-group-item" id="427" style="display: block;"><span class="glyphicon indent0 glyphicon-chevron-down"></span><span>Home</span></a>
        <a class="list-group-item first active" id="428" style="display: block;"><span class="glyphicon indent1 glyphicon-chevron-right"></span><span>Images</span></a>
        <a class="list-group-item child" id="431" style="display: none;"><span class="glyphicon indent2"></span><span>Sub category</span></a>
        <a class="list-group-item first" id="429" style="display: block;"><span class="glyphicon indent1 glyphicon-chevron-right"></span><span>Videos</span></a>
        <a class="list-group-item child" id="432" style="display: none;"><span class="glyphicon indent2"></span><span>Another sub</span></a>
        <a class="list-group-item first" id="430" style="display: block;"><span class="glyphicon indent1"></span><span>Documents</span></a>
    </div>
</div>

and what I need to do is select all elements between a.active. To explain that a little better; a.active has a span.glyphicon with the class indent1, so I need to select the elements between indent1 and the next indent1

I attempted to use jQuery's nextAll function but couldn't get it to work correctly :(

any help would be appreciated,

/r3plica

Update 1

Thanks to Arun, here is my script which now works:

$(".glyphicon", treeRoot).on('click', function (e) {
    e.stopPropagation();

    var $glyph = $(this);
    var $item = $glyph.parent();
    var indent = $item.find(".glyphicon").prop('className').match(/\b(indent\d+)\b/)[1];

    console.log($item[0].outerHTML);
    console.log(indent);

    if (indent != undefined) {
        var $children = $item.nextUntil("a:has(." + indent + ")");

        console.log($children[0].outerHTML);

        if ($glyph.hasClass("glyphicon-chevron-right")) {
            $glyph
                .addClass('glyphicon-chevron-down')
                .removeClass("glyphicon-chevron-right");

            if ($children != null) $children.show();
        } else {
            $glyph
                .addClass('glyphicon-chevron-right')
                .removeClass("glyphicon-chevron-down");

            if ($children != null) $children.hide();
        }
    }
});

Upvotes: 0

Views: 109

Answers (3)

Adil
Adil

Reputation: 148110

Try using nextUntil()

Live Demo

$('.active:has(.indent1)').nextUntil(':has(.indent1)')

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388316

Try

$('.active').nextUntil('a:has(.indent1)')

To dynamically determine the indent value

var $active = $('.active');
var indent = $active.find('.glyphicon').prop('className').match(/\b(indent\d+)\b/)[1];

var $nexts = $active.nextUntil('a:has(.' + indent + ')');
console.log($nexts)

Demo: Fiddle

Upvotes: 2

FBHY
FBHY

Reputation: 1004

Maybe with nextUntil (from Jquery)
Look at http://api.jquery.com/nextUntil/ 

$('.active').nextUntil('.indent1');

Upvotes: 0

Related Questions