Как пройти DOM для подготовки массива древовидной структуры

Question

Я хочу подготовить вложенный массив путем обхода DOM с использованием Javascript / jQuery. Интересующие элементы находятся в элементе #container и либо имеют класс dot, либо являются элементами input.

Я хочу подготовить массив как [name,name1,[name2]]. Я использовал здесь в основном используемые методы, такие как рекурсия. Но я не мог заставить его работать:

1010 * скрипка *

$(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

Вот как это можно решить, используя 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>

Answer 2

Вот как вы можете заставить это работать. Нет необходимости передавать 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>