javascript - 如何循环遍历嵌套三个级别的div的子级

我有一个看起来像这样的结构

$('#container').children().each(function() {
        var child = $(this).first();
        child.children().each(function() {
            console.log($(this).text() + '\nThis Should appear after each selectMe.text()');
        });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='container'>
        <div class='firstRows'>
            <div class='childOfFirstRow'>
                <div class='selectMe'>
                    First set of data
                </div>
                <div class='selectMe'>
                    Second set of data
                </div>
                <div class='selectMe'>
                    Third set of data
                </div>
                <div class='selectMe'>
                    Fourth set of data
                </div>
            </div>
        </div>
        <div class='firstRows'>
            <!-- Same data inside me too -->
        </div>
        <div class='firstRows'>
            <!-- Same data inside me too -->
        </div>
        <div class='firstRows'>
            <!-- Same data inside me too -->
        </div>
    </div>

这就是我要做的。


遍历firstRows内部的所有container
对于container中的每一行，将一个元素向下移至childOfFirstRow
对于selectMe内部的每个childOfFirstRow，更改数据。


我遇到的麻烦是选择selectMe。由于某种原因，如果我尝试一下，

$('#container').children().each(function() {
    $(this).first().children().each(function() {
        console.log($(this).text());
    });
});

这将立即带回所有孩子。就像我在做$(.childOfFirstRow).text();

我如何一次获得text()的selectMe，而不是一次获得？

最佳答案

您正在容器div中寻找子代的子代：

$('#container').children().each(function() {
    $(this).first().children().children().each(function() {
        console.log($(this).text());
    });
});

JS Fiddle Demo

关于javascript - 如何循环遍历嵌套三个级别的div的子级，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38573731/