检查元素是否在jQuery中的另一个元素之前或之后
让我们假设我有这个标记
<h3 id="first">First</h3> <p>Hi</p> <p>Hello</p> <h3 id="second">Second</h3> <p>Bye</p> <p>Goodbye</p> 我如何以编程方式检查一个元素，如p是否在第一个h3之后，第二个h3之前，使用jQuery？
我正在尝试做这样的事情：
$(p).each(function(){ if($(this).isAfter("#first") && $(this).isBefore("#second")) { // do stuff } });
要查看一个元素是否在另一个元素之后，可以使用prev()或prevAll()来获取前一个元素，并查看它是否匹配。
要查看一个元素是否在另一个元素之前，可以使用next()或nextAll()来获取下一个元素，并查看它是否匹配。
$.fn.isAfter = function(sel){ return this.prevAll(sel).length !== 0; } $.fn.isBefore= function(sel){ return this.nextAll(sel).length !== 0; }
DEMO： http : //jsfiddle.net/bk4k7/
火箭的解决scheme工作正常，如果sel是一个真正的select器，如果你传递一个jQuery对象，但它不会工作。
如果你想要一个可以同时处理select器和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);
荣获火箭原始解决scheme。
你可以使用index()函数：
$('p').each(function(){ var index = $(this).index(); if(index > $("#first").index() && index < $("#second").index()) { // do stuff } });
这是一个小提琴
$('p').each(function() { previousH3 = $(this).prevAll('h3'); nextH3 = $(this).nextAll('h3'); if (previousH3.length > 0 && nextH3.length > 0) { $(this).css('color', 'red') } });
答案：
$.fn.isAfter = function(sel){ return this.prevAll(sel).length !== 0; } $.fn.isBefore= function(sel){ return this.nextAll(sel).length !== 0; }
select所有以前的元素或下一个元素，无论select器（sel），所以我做了以下修改，select基于类的元素：
$.fn.isAfter = function(sel){ sel = "." + sel.attr("class").replace(/ /g, "."); return this.prevAll(sel).length !== 0; } $.fn.isBefore= function(sel){ sel = "." + sel.attr("class").replace(/ /g, "."); return this.nextAll(sel).length !== 0; }
记住Rocket的答案我更喜欢使用.index()方法，如下所示：
$.fn.isAfter = function(sel){ return $(this).index() > $(sel).index(); }; $.fn.isBefore= function(sel){ return $(this).index() < $(sel).index(); };
阅读/理解似乎更清楚，并在行select中完美地工作。
