如何在jQuery .each()中嵌套循环获取子元素以构建目录

是的，你可以通过在外层.each()循环内部嵌套一层遍历H3对应容器的.each()循环来实现多级目录的生成，修改后的可直接运行的代码如下：

$('.parent_div_class').each(function(i, obj) {
    var $parent = $(this);
    var h2Title = $parent.find('h2.h2_class').html();
    var h2Anchor = $parent.attr('id');
    // 先拼接H2对应项的基础结构
    var liHtml = '<li><a href="#' + h2Anchor + '">' + h2Title + '</a>';
    // 嵌套遍历当前父容器下的所有子内容块，生成H3层级目录
    liHtml += '<ul>';
    $parent.find('.child_div_class').each(function() {
        var h3Title = $(this).find('h3.h3_class').html();
        var h3Anchor = $(this).attr('id');
        liHtml += '<li><a href="#' + h3Anchor + '">' + h3Title + '</a></li>';
    });
    liHtml += '</ul></li>';
    // 把完整的层级项插入目录
    $('#table_of_contents ul').append(liHtml);
});

如果存在部分父容器没有子H3的场景，你可以加层判断避免生成空的<ul>标签，优化后的代码如下：

$('.parent_div_class').each(function(i, obj) {
    var $parent = $(this);
    var h2Title = $parent.find('h2.h2_class').html();
    var h2Anchor = $parent.attr('id');
    var liHtml = '<li><a href="#' + h2Anchor + '">' + h2Title + '</a>';
    var $childBlocks = $parent.find('.child_div_class');
    // 仅存在子内容块时才生成子层级目录
    if ($childBlocks.length > 0) {
        liHtml += '<ul>';
        $childBlocks.each(function() {
            var h3Title = $(this).find('h3.h3_class').html();
            var h3Anchor = $(this).attr('id');
            liHtml += '<li><a href="#' + h3Anchor + '">' + h3Title + '</a></li>';
        });
        liHtml += '</ul>';
    }
    liHtml += '</li>';
    $('#table_of_contents ul').append(liHtml);
});

内容的提问来源于stack exchange，提问作者user2168388