获取不是具有特定 CSS 类的容器的子元素的子元素答案

【问题标题】：Get children of an element that are not children of a container with a certain CSS class获取不是具有特定 CSS 类的容器的子元素的子元素
【发布时间】：2014-03-30 05:34:18
【问题描述】：

我有具有相同架构的嵌套控件并基于传递的控件 div ID，我想选择除内部控件中的项目之外的所有项目（“.inner”）。

 <div id="Main" class="outer">
    <div class="item">
        <div class="inner">inner1</div>

        <div id="Maininner" class="outer">
            <div class="item">
                <div class="inner">sub inner1</div>
            </div>
        </div>

    </div>
</div>

<script type="text/javascript">

    function GetItem(id) {
        var item = $($(id).find(".item:first"));
        item.find(".inner:not(.outer .outer .inner)").each(function () {
            alert(id + ": " + $(this).html());
        });
    }

    if (typeof $ != "undefined") {
        $(function () {
            GetItem("#Main"); //expected output "inner1" , **working**


            GetItem("#Maininner"); //expected output "sub inner1" **not working**
        });
    };
</script>

我想编写通用函数来处理这种情况。我尝试使用“：not”，但它仅适用于某些情况。有什么更好的方法来编写代码，这两种情况都适用吗？注意：我无法更改 HTML 结构。

【问题讨论】：

标签： jquery nested controls

【解决方案1】：

你可以使用 children 而不是 find

即 item.find(".inner:not(.outer .outer .inner)") 改为使用 children(".inner") 仅选择直接子元素（直接内部元素）

function GetItem(id) {
        var item = $($(id).find(".item:first"));

        item.children(".inner").each(function () {

            alert(id + ": " + $(this).html());
        });
    }

【讨论】：

如果“inner” div 不是“item”的直接子级，则此逻辑不起作用。