Bobert
Bobert

Reputation: 612

jquery selector such that children don't contain multiple classes?

I'm trying to write a selector which selects <div>s with class="my-rating" only when their children contain none of 3 classes below.

Example html:

<div class="my-rating" id="parentA">
    <div class="foo"></div>
</div>
<div class="my-rating" id="parentB">
</div>
<div class="my-rating" id="parentC">
    <div class="rating-full-star"></div>
    <div class="rating-full-star"></div>
    <div class="rating-full-star"></div>
    <div class="rating-half-star"></div>
    <div class="rating-empty-star"></div>
    <div class="bar"></div>
</div>
<div class="my-rating" id="parentD">
    <div class="rating-full-star"></div>
    <div class="rating-full-star"></div>
    <div class="rating-full-star"></div>
    <div class="rating-half-star"></div>
    <div class="rating-empty-star"></div>
</div>

Where I want to select parentA and parentB and exclude C and D.

Something like this:

$('.my-rating').children().filter(':not(.rating-full-star):not(.rating-half-star):not(.rating-empty-star)')

Except that this guy grabs all the children, not the parent. I also tried:

$('.my-rating :not(.rating-full-star,.rating-half-star,.rating-empty-star)')

But that's not grabbing too many items. What can I do here?

Upvotes: 0

Views: 50

Answers (2)

Joint
Joint

Reputation: 1218

Here you are:

$('.my-rating').not(':has(.rating-full-star, .rating-half-star, .rating-empty-star)');

Upvotes: 1

Brandon Lyons
Brandon Lyons

Reputation: 61

If you already have the child tags selected properly you can just grab the parent from them.

$('.my-rating').children().filter(':not(.rating-full-star):not(.rating-half-star):not(.rating-empty-star)').parent();

This will return a parent for each child element in the arr, if you only want one since they will be the same for each sibling you can use:

$('.my-rating').children().filter(':not(.rating-full-star):not(.rating-half-star):not(.rating-empty-star)').parent()[0];

Upvotes: 0

Related Questions