javascript - 如何循环遍历向下三层嵌套的 div 的子级

Question

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

$('#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>

这就是我必须做的。

1. 循环遍历容器内的所有firstRows
2. 对于容器内的每一行，将一个元素向下移动到childOfFirstRow
3. 对于 childOfFirstRow 内的每个 selectMe，更改数据。

我遇到的问题是选择selectMe。出于某种原因，如果我尝试一下，

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

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

如何一次获取 selectMe 的 text()，而不是一次获取全部？

Answer 1

您正在容器 div 中查找子级的子级:

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

JS Fiddle Demo