如何遍历DOM准备树状结构数组答案

【问题标题】：How to traverse DOM to prepare tree structure array如何遍历DOM准备树状结构数组
【发布时间】：2019-01-05 17:01:00
【问题描述】：

我想通过使用 Javascript/jQuery 遍历 DOM 来准备一个嵌套数组。感兴趣的元素在 #container 元素中，或者具有 dot 类或者是 input 元素。

我想准备像[name,name1,[name2]] 这样的数组。我在这里使用的主要是递归等技术。但我无法让它工作：

fiddle

$(document).ready(function(){
    var arr = [];
    function recurse(parent, arr){
        var temp = [];
        parent.find('*').each(function(){
    	    if($(this).is('input')){
                if($(this).parents('.dot').length==1){
                    console.log($(this));
                    temp.push($(this).attr('id'))
                }
            }
            if($(this).is('.dot')){
                recurse($(this), arr);
            }
        });
        arr.push(temp);
        return arr;
    }
    var elm = $('#container').find('.dot:first');
    console.log(recurse(elm, arr));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div class="dot">
      <div class="dot">
          <input type="password" id="name2" name="name2">	
      </div>
      <input type="text" id="name" name="name">
      <input type="password" id="name1" name="name1">
  </div>
</div>

【问题讨论】：

您要的是 JSON 还是 JavaScript 数组？第一个是文字...

标签： javascript jquery arrays object

【解决方案1】：

您可以通过以下方式使其发挥作用。无需将arr 作为参数传递：

function recurse($parent) {
    var arr = [];
    $parent.children('.dot, input').each(function(){
        arr.push($(this).is('input') ? $(this).attr('id') : recurse($(this)));
    });
    return arr;
}

$(function () {
    var elm = $('#container>.dot:first');
    console.log(recurse(elm));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div class="dot">
      <div class="dot">
          <input type="password" id="name2" name="name2">	
      </div>
      <input type="text" id="name" name="name">
      <input type="password" id="name1" name="name1">
  </div>
</div>

【讨论】：

【解决方案2】：

这里是如何使用 vanilla JS 解决它

const el = document.querySelector('#container > .dot');

function recurse(containerEl) {
    const result = [];
    const tmp = []; // used to preserve the order [name, name1, [name2]]
    const childrenCollection = containerEl.children;

    for (let i = 0; i < childrenCollection.length; i++) {
        if (childrenCollection[i].tagName === 'DIV') {
            tmp.push(recurse(childrenCollection[i]));
        } else {
            // use this line if you want to fill the array with elements
            // result.push(childrenCollection[i]);

            // use this line if you just want to retrieve the name attribute
            result.push(childrenCollection[i].name);
        }
    }

    return result.concat(tmp);
}

console.log(recurse(el));

<div id="container">
    <div class="dot">
        <div class="dot">
            <input type="password" id="name2" name="name2">
        </div>
        <input type="text" id="name" name="name">
        <input type="password" id="name1" name="name1">
    </div>
</div>

【讨论】：