JQuery：通过 class 选择不是特定于儿童的元素 class

Question

使用 JQuery，我想 select 所有不是“.slick-cloned”子元素的“.fittext”元素。
这是我的代码：

<div class="slick-slide slick-cloned">
    <div class="item">
        <div class="fittext"></div>
    </div>
</div>
<div class="slick-slide active">
    <div class="item">
        <div class="fittext"></div>
    </div>
</div>
<div class="slick-slide">
    <div class="item">
        <div class="fittext"></div>
    </div>
</div>
<div class="slick-slide slick-cloned">
    <div class="item">
        <div class="fittext"></div>
    </div>
</div>

我的 selector 应该是什么样子？我尝试了各种组合，但似乎做不对......我最后一次尝试是：

'$(".slick-slide .fittext").not('.slick-slide.slick-cloned')'

提前致谢！

Answer 1

您需要使用 :not 选择器

$(".slick-slide:not(.slick-cloned) .fittext")

Answer 2

您可以使用：

$('.slick-slike').not('.slick-cloned').find('.fittext');

要获得通用解决方案，您可以使用 .filter( fn ):

$('.fittext').filter(function() {
    return $(this).closest('.slick-cloned').length == 0;
});

$('.fittext').filter(function() {
    return $(this).closest('.slick-cloned').length == 0;
})
.text('THIS');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slick-slide slick-cloned">
    <div class="item">
        <div class="fittext">x</div>
    </div>
</div>
<div class="slick-slide active">
    <div class="item">
        <div class="fittext">x</div>
    </div>
</div>
<div class="slick-slide">
    <div class="item">
        <div class="fittext">x</div>
    </div>
</div>
<div class="slick-slide slick-cloned">
    <div class="item">
        <div class="fittext">x</div>
    </div>
</div>

Answer 3

也可以通过.each()实现，如下::

$(".slick-slide").each(function(){
   if(!$(this).hasClass("slick-cloned"))
   {
     alert($(this).find("div.fittext").text());
   }    
});

Working demo

JQuery：通过 class 选择不是特定于儿童的元素 class

JQuery: selecting elements by class that are not children specific class

jquery

jquery-selectors