jquery - How to get nested elements?

Question

I have some DOM structure:

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

How to get all elements of div which have 'model-B' class, but not other 'model-*' children? For example, result must be contain elements:

From first 'model-B'

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

And from second 'model-B'

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

Answer 1

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

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

Demo:

$('.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>