javascript - jQuery 将多个 DOM 节点引用连接到一个列表中

Question

例如，我有以下 HTML:

<div class="level0">
    <div>level 0 #1</div>
    <div class="contents">
        <div class="level1">
            <div>level 1 #1</div>
            <div class="contents">
                <div class="level2"><div>level 2 #1</div></div>
            </div>
         </div>
     </div>
</div>
<div class="level0">
    <div>level 0 #2</div>
    <div class="contents">
        <div class="level1"><div>level 1 #2</div></div>
        <div class="level1"><div>level 1 #3</div></div>
        <div class="level1">
            <div>level 1 #4</div>
            <div class="contents">
                <div class="level2"><div>level 2 #2</div></div>
                <div class="level2"><div>level 2 #3</div></div>
            </div>
         </div>
    </div>
</div>
<div class="level0"><div>level 0 #3</div></div>

我想获取所有对类为“level0”、“level1”或“level2”的节点的引用。然后我想从“level2”引用开始迭代它们，然后转到“level1”，然后是“level0”。

例如，下面的代码适用于我正在尝试做的事情:

$(".level2").each(function(){
    console.log($(this).children().first().text());
});
$(".level1").each(function(){
    console.log($(this).children().first().text());
});
$(".level0").each(function(){
    console.log($(this).children().first().text());
});

这将使控制台输出如下:
2 级 #1
2级#2
2级#3
一级#1
1级#2
1级#3
一级#4
0级#1
0级#2
0级#3

如您所见，它们是基于类的顺序，然后是在 HTML 中从上到下的顺序。 这就是我想要的

但是，我想按此顺序存储此元素列表因此我可以只对所有元素使用一个循环。

以下代码与我想要的类似，但显示以错误的顺序遍历行。

var $rows = $(".level2, .level1, .level0");
$rows.each(function(){
    console.log($(this).children().first().text());
});

这使用中序遍历遍历行。有没有什么方法可以将这些行附加到一个变量中，我可以按照上面我想要的顺序迭代它？

Answer 1

使用 for 循环和 _map 的粗略示例

var allArr = [],
    maxLevel = 2;
for (var i = maxLevel; i > -1; i--) {
    var arr = $('.level'+ i ).children('div:first-child').map(function () {
        return $.trim($(this).text());
    }).get();
    allArr = allArr.concat(arr);    
}
console.log(allArr);

虽然需要重构。

Check Fiddle