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

【问题标题】：Select elements filtering them if they belong to nested element如果它们属于嵌套元素，则选择过滤它们的元素
【发布时间】：2015-02-20 18:04:09
【问题描述】：

我想选择具有类目标的元素。这就是我用来这样做的， $(.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);

【问题讨论】：

当前容器元素是什么意思？有很多容器……你说的是哪个容器？
如果你可以根据一些事件告诉你当前的容器，那么你可以做 $(element).closest('.container').find('.target');
我已经更新了示例 html 标记，使其与我的实际实现非常相似，希望它能更好地说明问题。

标签： javascript jquery-selectors

【解决方案1】：

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

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

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

【讨论】：

因为，我可以在任何级别的容器内有一个容器，它不适用于嵌套容器。我已经更新了我的问题，希望它能更好地解释问题。