javascript - 存在多个具有相同类的 div 时如何将内容加载到唯一的 div

Question

我有一个如下的 HTML 布局。

            <div class="container">
                // Some contents are here in this level
                <div class="sub-container">
                    // Some contents are here in this level
                    <div class="sub-sub-container">     
                    // Some contents are here in this level
                    ......
                        .....
                            .....
                            .....
                        .....
                    ......
                    </div>
                </div>  
            </div>


        <div class="dynamically_added"> 
            <div class="container">
                // Some contents are here in this level
                <div class="sub-container">
                    // Some contents are here in this level
                    <div class="sub-sub-container">     
                    // Some contents are here in this level
                    ......
                        .....
                            .....
                            .....
                        .....
                    ......
                    </div>
                </div>  
            </div>
        </div>

问题是，当我尝试更新子容器或子子容器（只是嵌套在主（原始）容器 div 深处的任何 div）div 时，它也在更新动态添加的容器的内容。我怎样才能防止它，以便只更新原始内容？

Answer 1

如果将额外的类添加"static"到顶部的静态容器中：

<div class="static container">
    // Some contents are here in this level
    <div class="sub-container">
        // Some contents are here in this level
        <div class="sub-sub-container">     
            // Some contents are here in this level
        </div>
    </div>  
</div>

你可以这样做：

$sub_container = $('.static .sub-container');

Answer 2

使用 jQuery:eq()选择器

jQuery(function(){
    jQuery(".sub-container:eq(0)").html("content for first div"); // for first div
    jQuery(".sub-container:eq(1)").html("content for second div"); // for second div
})

Answer 3

您可以使用.filter()排除div内部的 s .dynamically_added：

var $div = $(".sub-sub-container").filter(function () {
   return $(this).closest(".dynamically_added").length == 0;
});

因此，在您的示例中，这将过滤掉与 classdiv中的选择器匹配的所有内容，并包括所有其他内容。div.dynamically_added

演示。

Answer 4

var container = $('div[class!="dynamically_added"] > .container');

应该给你每个元素都有一个container不直接嵌套在一个类下div的类dynamically_added