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)

You can try it out here，第一行是这样的，它也可以直接使用选择器字符串，例如：

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

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

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

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);

jQuery中元素DOM的相对位置

2 个答案: