Question

I have following markup:

<div class="region">
<div class="award">
<div class="award">
<div class="region">
<div class="award">
<div class="award">
<div class="award">
<div class="award">
<div class="award">
<div class="award">

How can I target the 3rd element after .region so that I get something like this?

<div class="region">
<div class="award">
<div class="award">
<div class="region">
<div class="award">
<div class="award">
<div class="award third">
<div class="award">
<div class="award">
<div class="award third">

Note that it is not counting the first two .award elements after first .region.

Thanks in advance!

Answer 1

nextUntil combined with eq should do it:

$("div.region").each(function() {
    $(this).nextUntil(":not(.award)").eq(2).addClass("third");
});

Nope, a little more complicated than that, to handle the 6th element:

$("div.region").each(function() {
    $(this).nextUntil(":not(.award)").filter(function(index) {
        return index % 3 == 2;
    }).addClass("third");
});

Live example | source

There we grab each of the .region elements, get their siblings up to the first one that isn’t an .award (nextUntil), and filter out ones that aren’t every third one.

(Not sure why I used map in my first working copy, filter makes much more sense.)