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

Question

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

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

小提琴

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

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