2

例如，假设我有以下 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());
});

这将使控制台输出如下：
level 2 #1
level 2 #2
level 2 #3
level 1 #1
level 1 #2
level 1 #3
level 1 #4
level 0 #1
level 0 #2
level 0 #3

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

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

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

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

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

4

2 回答 2

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);

不过需要重构。

检查小提琴

于 2013-09-13T04:23:07.993 回答
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());
});

看看这个小提琴，看看这两个选项都有效。

于 2013-09-13T14:37:43.090 回答