Question

我有相同架构的嵌套控件，并且基于传递的控件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结构。

Answer 1

您可以使用儿童代替

，即item.find（“。inner：not（.outer .outer .inner）”）而是使用子项（“。inner”），它将仅选择直接子项（直接内部元素）

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

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

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

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

1 个答案: