javascript - 如何遍历DOM准备树结构数组

Question

我想通过使用 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>

Answer 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>