Check if element is before or after another element in jQuery

Question

Let us suppose I have this markup

<h3 id="first">First</h3> <p>Hi</p> <p>Hello</p> <h3 id="second">Second</h3> <p>Bye</p> <p>Goodbye</p> 

How can I programmatically check if an element, such as one of the ps, is after first h3 and before the second h3, with jQuery?

I am trying to do something like this:

$(p).each(function(){    if($(this).isAfter("#first") && $(this).isBefore("#second")) {      // do stuff    } }); 

Answer 1

Rocket's solution works fine if sel is a real selector, if you pass a jquery object though, it won't work.

If you want a plugin that works with both selectors and jquery objects, just use my slightly modified version instead:

(function($) {     $.fn.isAfter = function(sel){         return this.prevAll().filter(sel).length !== 0;     };      $.fn.isBefore= function(sel){         return this.nextAll().filter(sel).length !== 0;     }; })(jQuery); 

Kudos to Rocket for the original solution.