Question

I have a code like below

If I click the “finallink” class, i want to select or display all previous elements that matches “level_” class until the “parent” class. There are so many “level” classes like “level_1, level_2… level_n.

​

<div class="parent">
    <a href="#" class="level_0">level 0 text</a>

    <div class="someclass">1</div>
    <div class="someclass">2</div>
    <div class="someclass">3</div>
    <div class="someclass">4</div>

    <h1 class="level_1">level 1 text</h1>

    <div class="someclass">1</div>
    <div class="someclass">2</div>
    <div class="someclass">3</div>
    <div class="someclass">4</div>

    <h2 class="level_2">level 2 text</h2>

    <a href="#" class="finallink">link</a>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

I tried something like this

$(".finallink").closest("h3").prevAll("level_1").css("background-color","yellow");

How Do I get all “level_” values. Example code jsfiddle

Answer 1

You’ve said the “previous” levels, by which I mean the ones prior to the link. You’ve said “until the parent class” and as that’s the container, that means we can use all previous siblings and then filter to just the ones with one of the level_x classes:

$(".finallink").click(function() {
    var list = $(this).prevAll().filter(function() {
        return this.className.match(/\blevel_/);
    });

    // Use `list`
});

Live Example | Source

This works even if you end up with other classes in front of level_1, e.g. <h2 class="something level_1" ...>.