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

使用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

Answer 2

我只是偶然发现了一个查找插件源代码的工作答案。

该解决方案使用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 ，看看这两个选项是否有效。

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

2 个答案: