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之前“。

Answer 2

你可以这样试试：

alert($('#p1,#p2')[0]===$('#p1')[0]);
alert($('#p3,#p2')[0]===$('#p3')[0]);
alert($('#p1,#p3')[0]===$('#p1')[0]);

...获取两个对象并查看哪个是第一个。

功能更好的可用性：

(function($) {
  $.fn.isBefore = function(elem) {
    return ($([elem.selector,this.selector].join(','))[0]===this[0]);
  }
})(jQuery);