索引dom元素



我试图在javascript/jquery(递归)中实现一种算法,该算法遍历DOM并返回每个HTML元素的索引,包括父母,兄弟姐妹和孩子。然后绘制DOM的树。我需要索引每个元素,通过添加一个索引attr的元素与索引作为一个字符串。例如:

<html>
<...>
<body>
<div index="1">
<div index="1.1">
<h2 index = "1.1.1">some text1</h2>
<h2 index = "1.1.2">some text</h2>
</div>
</div>
<div index="2">
<table index="2.1">
<tr index="2.1.1">
<td index="2.1.1.1">some cell</td>
<td> index = "2.1.1.2">some cell</td>
</tr>
<tr index="2.1.2">
<td index="2.1.2.1">some cell</td>
</tr>
</table>
</div>
<div index="3">
<h1 index="3.1">some text</h1>
</div>
</body>
</html>

实现这一目标的最佳方法是什么?什么好主意吗?

通过一个简单的迭代,您可以实现这个

function loop(el, isChild){
  for(var i=0; i<el.children.length;i++){
    var child = el.children[i];
    child.index = (isChild?(el.index + '.'):'') + (i+1);
    loop(child,false);
  }
}
loop(document.body);

最新更新