如何获取嵌套元素? [英] How to get nested elements?

问题描述

我有一些DOM结构:

<div class="model-A">
    <div class="some1">
        <div class="sub1"></div>
        <div class="model-B">
            <div class="some2">
                <div class="sub2"></div>
            </div>
            <div class="model-C">
                <div class="some3">
                    <div class="sub3"></div>
                    <div class="model-B">
                        <div class="some4"></div>
                        <div class="sub4"></div>
                    </div>
                </div>
            </div>
            <div class="some2">
                <div class="sub2"></div>
            </div>
        </div>
    </div>
</div>

如何使div的所有元素都具有'model-B'类，而不是其他'model- *'子类?例如，结果必须包含元素:

How to get all elements of div wich have 'model-B' class, but not other 'model-*' childs? For examle, result must be containt elements:

从第一个模型B"开始

<div class="some2">
   <div class="sub2"></div>
</div>
<div class="some2">
   <div class="sub2"></div>
</div>

从第二个"B型"开始

<div class="some4"></div>
<div class="sub4"></div>

推荐答案

您可以使用:has选择器来做到这一点，像这样:

You could do it with the :has selector, like this:

$('.model-B>div').not(':has([class^=model])')

演示:

$('.model-B>div').not(':has([class^=model])').each(function () {
    console.log(this.outerHTML);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="model-A">
    <div class="some1">
        <div class="sub1"></div>
        <div class="model-B">
            <div class="some2">
                <div class="sub2"></div>
            </div>
            <div class="model-C">
                <div class="some3">
                    <div class="sub3"></div>
                    <div class="model-B">
                        <div class="some4"></div>
                        <div class="sub4"></div>
                    </div>
                </div>
            </div>
            <div class="some2">
                <div class="sub2"></div>
            </div>
        </div>
    </div>
</div>

这篇关于如何获取嵌套元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！