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
1 级#2
1级#3
1级#4
0级#1
0级#2
0级#3

正如您所看到的，它们按照类的顺序排列，然后按照 HTML 中从上到下的顺序排列。 这就是我想要的

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

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

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

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

Answer 1

我刚刚在浏览插件源代码时偶然发现了一个可行的答案。

该解决方案使用 jQuery 函数 $.merge()。

以下代码完成了我想做的事情:

var $rows = $(".level2");
var $rows = $.merge($rows,$(".level1"));
var $rows = $.merge($rows,$(".level0"));

$rows.each(function(){
    console.log($(this).children().first().text());
});

我想如果你想变得更棘手一点，下面的代码也可以工作:

var $allRows = $.merge($.merge($(".level2"),$(".level1")),$(".level0"));

$allRows.each(function(){
    console.log($(this).children().first().text());
});

查看 this fiddle 看看这两个选项都有效。