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树中的位置，而不是屏幕上的物理位置。

- wxs

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

- Nick Craver

---

哦，太酷了！这里有什么地方慢吗？添加函数特别慢吗？ - wxs

@wxs - 我一开始脑子短路了，上面的实现不应该有任何速度问题 :) - Nick Craver

好的。是的，它似乎不应该很慢。非常感谢！ - wxs

很酷的是，添加方法会保持它们在文档顺序中。 - xi.lin

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

- Dr.Molle

---

这个行得通吗？jQuery保证按DOM中出现的顺序返回元素吗？ - wxs

不好意思，它不能保证。我以为可以，因为它可以与您的示例标记一起使用，但是文档中写道，顺序可能会有所不同。http://api.jquery.com/multiple-selector/ - Dr.Molle

@DrMolle - 顺序可能与指定的顺序不同，但它们将按照文档顺序排列...这才是真正重要的，所以您的方法可行，只是不太容易重复使用 :) - Nick Craver

如果你这么说，我不会反驳 :). 直到今天我才开始考虑这个位置。在上面添加了更易使用的功能。 - Dr.Molle