使用jQuery来获取不是具有某个CSS类的容器的子元素的后代

前端之家收集整理的这篇文章主要介绍了使用jQuery来获取不是具有某个CSS类的容器的子元素的后代前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一种情况,我需要选择某个元素的所有后代,但排除那些属于容器的孩子的容器,这个容器等于我运行我的选择器的容器的CSS类。

相当复杂的描述。

<div class="container">
   <div class="element"></div>
   <div class="element"></div>
   <div class="element"></div>
   <div class="element">
       <div class="container">
           <div class="element"></div>
           <div class="element"></div>
           <div class="element"></div>
       </div>
   </div>

在最外面的DIV上运行一个jQuery .find(‘。element’)会得到我所有的DIV,甚至是第二个容器内的DIV。那就是我尽量避免。

在这种情况下,是否有快速简单的jQuery选择器解决方案?

解决方法

我想你想要使用的是 not选择器。喜欢这个..
$(".container").not(".container .container")

或者,您可以使用children选择器,从一级深度获取孩子。这将排除嵌套div。

要更清楚一点,我想在使用’find’后,您将要使用not selector。喜欢这个:

$(".container").find(".element").not($(".container .container .element"))

您可以将函数传递给不可用,因此您可以使该函数查看每个元素的父项匹配,以查看它是否嵌套在具有相同类的元素之内。

http://jsfiddle.net/QXfs2/6/

removeIfNested = function(index) {
    // this is the corrent DOM element
    var $this = $(this),return_value = false;

    $.each($this.attr('class').split(/\s+/),function(index) {
        if ($this.parents("." + this).length > 0) {
            return_value = default_value || true;
        }
    });

    return return_value;
}


$(".container").find(".element").not(removeIfNested);

如果你可以添加一个类到嵌套容器,那将是理想的,那就是:

$(".container").find(".element").not($(".nested .element"))

假设你将类“嵌套”添加到你的内部容器div中。

猜你在找的jQuery相关文章