javascript - 如果元素属于嵌套元素，则选择过滤它们的元素

Question

我想选择具有类目标的元素。这就是我用来这样做的，$(.container).find('.target);但是，问题是它针对的是嵌套容器的子元素。那么，如何过滤选择，以便仅定位属于当前容器元素的元素。例如，对于父“容器”元素，我需要选择具有“目标”类且文本为“通过 jquery 选择此”的元素(注意:要选择的实际元素可以在其中包含任何内容)。

HTML 标记如下:

<div id="my-container-1" class="container" data-name="container-1">
<div class="inside-wrapper">
    <div class="inside">
        <div id="my-container-1-container-2-0" class="container" data-name="container-1:container-2">
            <div class="inside-wrapper">
                <div class="inside"></div>
                <div class="target">select this for container(my-container-1-container-2-0)</div>
            </div>
        </div>
        <div class="target">select this for container(my-container-1)</div>
    </div>
    <div class="inside">
        <div id="my-container-1-container-2-1" class="container" data-name="container-1:container-2">
            <div class="inside-wrapper">
                <div class="inside">
                    <div class="target">select this for container(my-container-1-container-2-1)</div>
                </div>
            </div>
        </div>
        <div class="maybe-other-wrapper-class">
            <div class="target">select this for container(my-container-1)</div>
        </div>
    </div>
    <div class="inside">
        <div id="my-container-1-container-2-2" class="container" data-name="container-1:container-2">
            <div class="inside-wrapper">
                <div class="inside"></div>
            </div>
        </div>
        <div class="target">select this for container(my-container-1)</div>
    </div>
    <div class="target">select this for container(my-container-1)</div>
</div>

更新:这是我当前的解决方案( jsfiddle link )，它似乎有效，但不确定这是否是最好的方法。

var module = (function ($) {
var module = {};
//@todo This should return target elements that belong 
//to the passed container element and not parent or child container
module.getTarget = function (container) {
    return container.find('.target').filter(function () {
        return $(this).closest('.container').data('name') === container.data('name');
    });
};

$(function () {
    $('.container').each(function () {
        console.log($(this).attr('id'));
        console.log(module.getTarget($(this)));

    });
});

return module;
})(jQuery);

Answer 1

使用:not() selector排除嵌套的.target。

$('.container .target:not(.container .container .target)') 

看看这个例子 - http://jsbin.com/babiviziye/1/edit?html,js,output