jQuery中元素DOM的相对位置

Question

鉴于两个jquery对象,我是否有某种方式告诉文档树中哪一个比另一个"更进一步"呢？换句话说,用一个文件

 <p id="p1" ></p>
 <div id="div1">
    <p id="p2"></p>
 </div>
 <p id="p3"></p>

是否有一些功能如此？

$("#p1").isBefore($("#p2")); // == true
$("#p3").isBefore($("#p2")); // == false
$("#p1").isBefore(#("#p3")); // == true

请注意,我关心文档的HTML树中的位置,而不是屏幕上的物理位置.

Answer 1

您可以创建一个执行此操作的函数,如下所示:

(function($) {
  $.fn.isBefore = function(elem) {
    if(typeof(elem) == "string") elem = $(elem);
    return this.add(elem).index(elem) > 0;
  }
})(jQuery)

你可以在这里试试,第一行是这样它也可以直接取一个选择器字符串,例如:

$("#p1").isBefore("#p2");

这样做的是.add()附加元素(或选择器)(jQuery以文档顺序保存)然后检查它是否是两者中的第二个.

如果运行的选择器具有多个元素,则如果这些元素中的任何元素在传入的元素或选择器之前" 返回",则返回true ,因此,例如,给定标记$("p").isBefore("#p2")将是true,因为至少有一个元素<p>出现在"之前" #p2.