有没有办法使用 jQuery 在 dom 遍历中打印结束元素？

Question

我正在尝试学习 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>

Answer 1

but I cannot get the ascending closing tags for the elements

没有 "the closing tag"，只有 "the element" - 一旦从 HTML 转换为 DOM，它就存在于 [=22= 的层次结构中] 与 parents/children/siblings - 将其视为树视图而不是 HTML。

如果你想知道什么时候结束，你可以递归地编写你的函数，或者可能使用像 $(this).index() == $(this).siblings().length-1 (jQuery: how do I check if an element is the last sibling?)

这样的检查

Answer 2

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>

有没有办法使用 jQuery 在 dom 遍历中打印结束元素？

Is there a way to print closing elements in a dom traversal using jQuery?

html

javascript

jquery

dom

traversal