DOM 中元素之间的“距离”(生成深度等)
'Distance' between elements in DOM (generation depth etc.)
我正在寻找一个函数,该函数可以根据祖先,兄弟姐妹和后代返回DOM中元素之间的"距离"。例如,假设我有:
<div id="div1">
<div id="div5"></div>
</div>
<div id="div2">
<div id="div6">
<div id="div9"></div>
</div>
<div id="div7"></div>
</div>
<div id="div3"></div>
<div id="div4">
<div id="div8">
<div id="div10"></div>
</div>
</div>
那么我想要一个函数,它将返回#div5
和#div10
之间的距离,如下所示:
{
up: 1,
across: 3,
down: 2
}
因为要从#div5
到#div10
你必须上升一代,前进3个兄弟姐妹(到#div4
),然后下降2代。同样,#div1
#div9
将返回:
{
up: 2,
across: -1,
down: 0
}
上升两代,然后支持一个兄弟姐妹。
我已经有一个可以做到这一点的函数(我将在下面作为答案包含),所以我在这里包含它,因为 a)我认为其他人可能会发现它很有用;b)也许其他人有更好的方法。
好的,这就是我所拥有的。我希望在代码注释中已经很好地解释了它:
function DOMdistance(elem1,elem2) {
if (elem1 === elem2) {
return {
up: 0,
across: 0,
down: 0
};
}
var parents1 = [elem1],
parents2 = [elem2],
gens = 1,
sibs = 0,
sibElem;
// searches up the DOM from elem1 to the body, stopping and
// returning if it finds elem2 as a direct ancestor
while (elem1 !== document.body) {
elem1 = elem1.parentNode;
if (elem1 === elem2) {
return {
up: parents1.length,
across: 0,
down: 0
};
}
parents1.unshift(elem1);
}
// reset value of elem1 for use in the while loop that follows:
elem1 = parents1[parents1.length - 1];
// searches up the DOM from elem2 to the body, stopping and
// returning if it finds elem1 as a direct ancestor
while (elem2 !== document.body) {
elem2 = elem2.parentNode;
if (elem2 === elem1) {
return {
up: 0,
across: 0,
down: parents2.length
};
}
parents2.unshift(elem2);
}
// finds generation depth from body of first generation of ancestors
// of elem1 and elem2 that aren't common to both
while (parents1[gens] === parents2[gens]) {
gens++;
}
sibElem = parents1[gens];
// searches forward across siblings from the earliest non-common ancestor
// of elem1, looking for earliest non-common ancestor of elem2
while (sibElem) {
sibElem = sibElem.nextSibling;
if (sibElem && sibElem.tagName) {
sibs++;
if (sibElem === parents2[gens]) {
return {
up: parents1.length - gens - 1,
across: sibs,
down: parents2.length - gens - 1
};
}
}
}
sibs = 0;
sibElem = parents1[gens];
// searches backward across siblings from the earliest non-common ancestor
// of elem1, looking for earliest non-common ancestor of elem2
while (sibElem) {
sibElem = sibElem.previousSibling;
if (sibElem && sibElem.tagName) {
sibs--;
if (sibElem === parents2[gens]) {
return {
up: parents1.length - gens - 1,
across: sibs,
down: parents2.length - gens - 1
};
}
}
}
}
因此,例如,在问题中描述的 DOM 中获取从#div5
到#div10
的"距离"将使用如下内容:
var divOne = document.getElementById('div5'),
divTwo = document.getElementById('div10'),
distance = DOMdistance(divOne, divTwo);
因此distance
将是:
{
up: 1,
across: 3,
down: 2
}
演示:http://jsfiddle.net/x58Ga/
相关文章:
- 在不知道深度或父属性的情况下从对象中删除属性
- 递归深度比较
- 如何对映射插件创建的敲除对象进行深度复制
- 计算php或js中的距离
- 使用谷歌地图api计算距离并将其设置在表格中<td>
- 3d上的深度比例错误
- 将对象从另一个不可变的Map分配给Map是否意味着深度克隆
- 如何在谷歌地图api v3中获得无公里驾驶距离
- BatmanJS:深度嵌套路由
- 铯JS-两点之间的距离
- Chai深度包含了对嵌套对象的断言
- 地理位置和计算从当前纬度/液化天然气到另一纬度/液化石油气的距离
- cloudSearch:范围从0到某个值之间的距离
- javascript对象值的动态深度访问
- 与 lodash 进行对象深度比较的数组
- 计算数据点阵列与平均值的最大距离,并返回相关数据点
- 重置剑道日期选择器的深度
- JavaScript中的深度嵌套函数
- 远距离变换元素的宽度/高度(以像素为单位)
- DOM 中元素之间的“距离”(生成深度等)