Есть ли способ напечатать закрывающие элементы в обходе DOM, используя jQuery? - PullRequest
Новая
       20

Есть ли способ напечатать закрывающие элементы в обходе DOM, используя jQuery?

0 голосов
/ 26 марта 2019

Я пытаюсь выучить 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>

Ответы [ 2 ]

0 голосов
/ 26 марта 2019

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>
0 голосов
/ 26 марта 2019

но я не могу получить закрывающие закрывающие теги для элементов

Нет такой вещи как «закрывающий тег», только «элемент» - однажды преобразованный из HTML в DOM, он существует в иерархии в DOM с родителями / детьми / братьями и сестрами - воспринимайте это больше как древовидное представление чем HTML.

Вы можете написать свою функцию рекурсивно, если хотите знать, когда дойдете до конца, или, возможно, использовать проверку типа $(this).index() == $(this).siblings().length-1 ( jQuery: как проверить, является ли элемент последним братом или сестрой? )

...