Is there a jQuery selector to accomplish this task?

Question

I have these 4 HTML snippets:

Siblings:

<div class="a">...</div>
<div class="b">...</div>        <!--selected-->
<div class="b">...</div>        <!--not selected-->

Wrapped 1:

<div class="a">...</div>
<div>
    <div class="b">...</div>    <!--selected-->
</div>
<div class="b">...</div>        <!--not selected-->

Wrapped 2:

<div>
    <div class="a">...</div>
</div>
<div>
    <div class="b">...</div>    <!--selected-->
</div>
<div class="b">...</div>        <!--not selected-->

Separated:

<div class="a">...</div>
<div>...</div>
<div class="b">...</div>        <!--selected-->
<div>...</div>
<div class="b">...</div>        <!--not selected-->
<div>...</div>
<div class="b">...</div>        <!--not selected-->

How can I, with jQuery, select the next .b element for any given .a element, regardless of nesting?

I want something like this:

$('.a').each(function() {
    var nearestB = $(this)./*Something epically wonderful here*/;

    //do other stuff here
});

By chance is there a limit to how deeply nested the next b can be? — Alex Larzelere, Jun 29 '10 at 13:41
Can you update your example to show the fact that there can be many .bs (not 1:1 with the .as)? — Jonathon Faust, Jun 29 '10 at 13:53

score 3 · Answer 1 · answered Jun 29 '10 at 13:56

3

Can you try this to see if it suits your case?

    $(document).ready(function () {
        var isA = false;

        $('div.a, div.b').each(function () {
            if ($(this).attr('class') == "a")
                isA = true;
            if ($(this).attr('class') == "b" && isA) {
                $(this).css("background", "yellow");
                isA = false;
            }
        });
    });

Regards...

answered Jun 29 '10 at 13:56

Padel

8,587
1
17
11

Yes! That works. Although I think you may have just nudged me towards a better way. – Eric Jun 29 '10 at 14:04
It's a good thing then! Maybe work on it a little (change .attr('class') == "a" with .hasClass("a") etc) to make it better... Cheers! – Padel Jun 29 '10 at 14:08
Ok, I have a solution [here](http://stackoverflow.com/questions/3141038/is-there-a-jquery-selector-to-accomplish-this-task/3141476#3141476) that feels less like cheating (ie no changing variables). However, yours look much more efficient. – Eric Jun 29 '10 at 14:12

Eric · Answer 2 · 2010-06-29T15:41:45.020

3

Got it!

var both = $('.a, .b');

$('.a').each(function() {
    var nearestB = both.slice(both.index(this))
                       .filter('.b')
                       .first();

    //do stuff
});

edited Jun 29 '10 at 15:41

answered Jun 29 '10 at 14:11

Eric

95,302
53
242
374

It is perfectly acceptable to mark your own answer as the accepted one: http://meta.stackexchange.com/questions/12513/should-i-not-answer-my-own-questions – fearoffours Jun 29 '10 at 19:32
Indeed. However, I can't decide whether my answer is better than Padel's. – Eric Jun 30 '10 at 06:14

score 2 · Answer 3 · answered Jun 29 '10 at 13:35

2

How are you deciding which .a to select? Is there a .b for ever .a? Are you looping over each? You could use the index of the .a and simply select the corresponding .b.

$(".a").each(function(){
    var index = $(".a").index(this);
    var theB = $(".b").get(index);
});

answered Jun 29 '10 at 13:35

Jonathon Faust

12,396
4
50
63

There _is_ a `.b` for every `.a`. There is _not_ an `.a` for every `.b`. So unfortunately that wouldn't work. All the `a.` s will be selected. See my updated question. – Eric Jun 29 '10 at 13:38

score 1 · Accepted Answer · edited May 23 '17 at 11:55

1

Ok, here's a modified version of Padel's solution, that behaves slightly differently

var lastA = null;

$('.a, .b').each(function() {
    if($(this).hasClass('a'))
    {
        lastA = $(this);
    }
    else if(lastA)
    {
        doStuff(lastA,this); //doStuff(a,b)
        lastA = null;
    }
});

edited May 23 '17 at 11:55

Community

1
1

answered Jun 29 '10 at 14:47

Eric

95,302
53
242
374

1

i like your own previous answer better, because it allows to be used on a per element basis, instead of only once on all elements.. i mean that it could be adapted to work on hover by finding the next `.b` element, while this one cannot be easily adapted to that scenario.. – Gabriele Petrioli Jun 29 '10 at 14:55

score 0 · Answer 5 · answered Jun 29 '10 at 13:33

0

$("div.a").nextAll("div.b")

Does this work?

answered Jun 29 '10 at 13:33

PeterWong

15,951
9
59
68

Is there a jQuery selector to accomplish this task?

Siblings:

Wrapped 1:

Wrapped 2:

Separated:

5 Answers5