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
});

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
});

• javascript
• jquery
• jquery-traversing

• By chance is there a limit to how deeply nested the next b can be? – Alex Larzelere Commented Jun 29, 2010 at 13:41
• Probably, but I'd prefer a general solution. – Eric Commented Jun 29, 2010 at 13:43
• Can you update your example to show the fact that there can be many .bs (not 1:1 with the .as)? – Jonathon Faust Commented Jun 29, 2010 at 13:53

5 Answers 5

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...

Got it!

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

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

    //do stuff
});​

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);
});

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;
    }
});

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

Does this work?