检查元素是否在jQuery中的另一个元素之前或之后

Question

让我们假设我有这个标记

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

我如何使用jQuery以编程方式检查元素(例如其中一个元素)p是在第一个元素之后h3还是在第二个元素之前h3？

我想做这样的事情:

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

Answer 1

如果sel是真正的选择器,Rocket的解决方案可以正常工作,如果你传递一个jquery对象,它将无法工作.

如果你想要一个兼容选择器和jquery对象的插件,只需使用我稍微修改过的版本:

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

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

感谢Rocket的原始解决方案.

Answer 2

要查看元素是否在另一个元素之后,您可以使用prev()或prevAll()获取前一个元素,并查看它是否匹配.

要查看元素是否在另一个元素之前,您可以使用next()或nextAll()获取下一个元素,并查看它是否匹配.

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

演示:http://jsfiddle.net/bk4k7/

Answer 3

你可以使用这个index()功能:

$('p').each(function(){
   var index = $(this).index();
   if(index > $("#first").index() && index < $("#second").index()) {
     // do stuff
   }
});