Logan Serman
Logan Serman

Reputation: 29870

Find the next element that is not immediate?

I want to find the first span element after class counter, in code something like this:

<div class="counter"></div>
<p></p>
<span></span>

It seems like the next() function only finds the immediate next element, so something like this:

$(".counter").next("span")

Won't work. The way I have been using is a bit lengthy and I was wondering if there was a shorter way, it is this:

$(".counter").nextAll("span").eq(0)

I think the closest() method in jQuery 3 will do the trick, but I am using 1.2.6 -- is there a better way to do this (am I just using next() wrong?)

Upvotes: 21

Views: 27799

Answers (6)

Pim Jager
Pim Jager

Reputation: 32119

I think your method is the best way. And if you feel it doesn't look good just turn it into a plugin:

jQuery.fn.firstAfter = function(filter){
 return this.nextAll(filter).eq(0);
}

Upvotes: 8

Nick Olsen
Nick Olsen

Reputation: 6369

Similar to the marked answer but looks a little cleaner using the :first selector:

$('.counter').nextAll('span:first')

Upvotes: 17

pbscorp
pbscorp

Reputation:

$(".counter + span")

Upvotes: 0

landyman
landyman

Reputation: 2053

Try something like this:

$(".counter ~ span:first");

Hope that helps!

Upvotes: 0

Allain Lalonde
Allain Lalonde

Reputation: 93328

I'm not sure that the closest method will do the trick, but if so... maybe you can extract the closest method from 1.3 and turning it into a plugin?

I haven't had a chance to try this, but give it a shot. It can't hurt:

(function($) {
  $.fn.closest = function (selector) {
    return this.map(function(){
      var cur = this;
      while ( cur && cur.ownerDocument ) {
        if ( $(cur).is(selector) )
          return cur;
        cur = cur.parentNode;
      }
    });
  }
})(jQuery);

Upvotes: 1

Andrew Hare
Andrew Hare

Reputation: 351476

I think the siblings() function is what you are looking for. Try something like this:

$(".counter").siblings("span");

Upvotes: 3

Related Questions