Question

I am having an HTML layout like follows.

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

The problem is that, when I am trying to update the sub-container or sub-sub-container (simply any div nested deep inside the main (original) container div) div it is updating the contents of the dynamically added container also. How can I prevent it, so that only the original contents are updated?

Answer 1

You could use .filter() to exclude divs that are inside .dynamically_added:

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

Thus, in your example, this will filter out every div that matches the selector that are within the div with the class .dynamically_added, and include all others.

DEMO.