CODEWITHSUNDEEP
jqueryjquery-selectors
acanana
acanana

Reputation: 61

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

Using JQuery, I would like to select all '.fittext' elements that are not children of '.slick-cloned'.
Here's my code:

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

What should my selector look like? I tried various combinations but can't seem to do it right... My last trial was:

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

Thanks in advance!

Upvotes: 1

Views: 134

Answers (3)

PeterKA
PeterKA

Reputation: 24638

You can use:

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

To get a generalized solution you can use .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>

Upvotes: 0

Akshay Chawla
Akshay Chawla

Reputation: 613

You can also achieve by .each(), as below ::

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

Working demo

Upvotes: 0

LTasty
LTasty

Reputation: 2008

You need to use :not selector

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

Upvotes: 1

Related Questions