Question

I’d like to be able to select the next instance of a specific selector such as .ajax-loader in the following. I tried .next(‘.ajax-loader’) but didn’t seem to work and since there could be intervening classes, just simply next() wouldn’t work. Here’s my markup and a fiddle:

$(document).ready(function(){
  $('.click-me').on('click',function(){
    $(this).next().html('here i am');
  });
});​

html:

<button class='click-me'>JT</button>
<div class='other-loader'>other loader</div><div class='ajax-loader'></div><br />
<button class='click-me'>JU</button><div class='ajax-loader'></div><br />

In the first example, how could I progamatically say the next instance of ajax-loader? Here is a fiddle: http://jsfiddle.net/HAJLP/2/

thx in advance

Answer 1

Try to use nextAll() with :first.

$(document).ready(function(){
  $('.click-me').on('click',function(){
     $(this).nextAll('.ajax-loader:first').html('here i am');
  });
});​