首先,我的意思是在 HTML 中一个元素的开始标签比第二个元素的开始标签更早。
两个元素可以是完全随机的,可以是兄弟节点,也可以是一个元素的祖先或后代。因此解决方案应该是一个函数,接受 2 个随机的 DOM 元素,并检查哪个在 DOM 层次结构中是第一个。
首先,我的意思是在 HTML 中一个元素的开始标签比第二个元素的开始标签更早。
两个元素可以是完全随机的,可以是兄弟节点,也可以是一个元素的祖先或后代。因此解决方案应该是一个函数,接受 2 个随机的 DOM 元素,并检查哪个在 DOM 层次结构中是第一个。
Node.compareDocumentPosition()
来实现这一点。
var node1 = document.getElementById('test1');
var node2 = document.getElementById('test2');
if ( node1.compareDocumentPosition(node2) & Node.DOCUMENT_POSITION_FOLLOWING ) {
// node 1 comes before node2
} else {
// node 2 comes before node1
}
<div id="test1"></div>
<div id="test2"></div>
1 = DOCUMENT_POSITION_DISCONNECTED
2 = DOCUMENT_POSITION_PRECEDING
4 = DOCUMENT_POSITION_FOLLOWING
8 = DOCUMENT_POSITION_CONTAINS
16 = DOCUMENT_POSITION_CONTAINED_BY
32 = DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC
使用jQuery的index()
函数可以做类似的事情,但效率远不如此。
$.fn.comesBefore = function(elem) {
var all = $('*');
return all.index(this) < all.index($(elem));
}
var node1 = $('#test1');
var node2 = $('#test2');
var result = node1.comesBefore(node2); // false, node1 comes after node2
document.body.innerHTML = result;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div id="test2"></div>
</div>
<div id="test1"></div>
body
元素,并在两个元素上运行index()
方法时,它们都返回-1
,因为它根本不知道这些元素的存在。我需要使用$('*')
来作为集合,但这样做效率就会降低。 - Karol