我正在努力学习jQuery
的新工作,我发现自己对它提供的不同遍历命令有点困惑。
我想按顺序打印每个元素的名称标签,它们的深度和结束标签,如果有办法做到这一点,我很好奇。
我有它为降序元素和没有子元素的元素工作,但我无法获得元素的升序结束标记。
这是html
<html id = "test">
<head>
</head>
<body>
<p> Hello World</p>
<div id = "div1"></div>
</body>
</html>
这是我的jQuery脚本
$(document).ready(function() {
domWalk();
function domWalk() {
$("html").find("*").addBack().each(function() {
console.log( $(this).parents().length +" <"+ this.nodeName + "> ");
if($(this).children() .length == 0){
console.log( $(this).parents().length +" </"+ this.nodeName + "> ");
}
});
};
});
预期成绩
0<HTML>
1<HEAD>
1</HEAD>
1<BODY>
2<P>
2</P>
2<DIV>
2</DIV>
2<SCRIPT>
2</SCRIPT>
1</BODY>
0</HTML>
实际结果
0<HTML>
1<HEAD>
1</HEAD>
1<BODY>
2<P>
2</P>
2<DIV>
2</DIV>
2<SCRIPT>
2</SCRIPT>
jQuery
不会给你自己这样做的方式,JavaScript
会。您只需要构建一个递归函数,该函数使用子节点迭代节点,如下所示:
function getTree($node, level) {
level = level || 0;
return $node.toArray().reduce(function(array, item) {
var $item = $(item);
var $children = $item.children();
array.push(level + '<' + item.nodeName + '>');
if ($children.length) {
Array.prototype.push.apply(array, getTree($children, level + 1));
}
array.push(level + '</' + item.nodeName + '>');
return array;
}, []);
}
console.log(getTree($('html')));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html id="test">
<head>
</head>
<body>
<p> Hello World</p>
<div id="div1"></div>
</body>
</html>
您将在前面的代码片段中看到它将采用script
标签和幕后创建的style
标签,但我认为结果就是您要搜索的内容。
这是使用常规JavaScript
(ES6)的相同功能:
const getTree = (node, level = 0) =>
Array.prototype.reduce.call(node, (array, item) => {
array = [...array, `${level}<${item.nodeName}>`];
(item.children.length && (array = [...array, ...(getTree(item.children, level + 1))]));
array = [...array, `${level}</${item.nodeName}>`];
return array;
}, []);
console.log(getTree(document.querySelectorAll('html')));
<html id="test">
<head>
</head>
<body>
<p> Hello World</p>
<div id="div1"></div>
</body>
</html>
但我无法获得元素的升序结束标记
没有“结束标签”这样的东西,只有“元素” - 一旦从HTML转换为DOM,它就存在于DOM中与父母/子女/兄弟姐妹的层次结构中 - 认为它更像是树视图而不是HTML。
如果你想知道什么时候结束,或者可能使用像$(this).index() == $(this).siblings().length-1
(jQuery: how do I check if an element is the last sibling?)这样的支票,你可以递归地编写你的函数