jQuery/CSS: count elements with certain classes, but without one specific class

Question

I have label, which has classes status-label and unavailable. I want to count all those containing it and exclude those, which have also class named "hide"

<label class="status-label unavailable"> should be selected
while
<label class="status-label unavailable hide"> shouldn't

I have tried to count the result like this:

var invalidConfigs=$("label.status-label.unavailable").not(".hide").length;

this didn't work either:

var invalidConfigs=$("label.status-label.unavailable:not(.hide)).length;

The first version of your code works fine - jsfiddle.net/gn601536 The second version also works without the missing " - jsfiddle.net/gn601536 — Turnip
– Turnip, Commented Nov 10, 2015 at 12:06
$("label.status-label.unavailable").filter(":not('.hide')").length — Kishore Sahasranaman
– Kishore Sahasranaman, Commented Nov 10, 2015 at 12:08
Try using the browser console - wickedlysmart.com/hfjsconsole — max
– max, Commented Nov 10, 2015 at 12:11
Um, there is no problem using the browser console even with iframes like in the stackoverflow editor. — max
– max, Commented Nov 10, 2015 at 12:20

max · Accepted Answer · 2015-11-10 13:47:10Z

1

var invalidConfigs = $("label.status-label.unavailable:not(.hide)")
   .css("color", "red") // just for demo purposes
   .length;
console.log(invalidConfigs);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="status-label unavailable"> should be selected</label>
<label class="status-label unavailable hide"> shouldn't</label>

You are missing an end quote in your selector.

.css("color", "red") is just for the demo to make it visually apparent which element is selected.

edited Nov 10, 2015 at 13:47

answered Nov 10, 2015 at 12:06

max

103k15 gold badges113 silver badges177 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

max Over a year ago

The difference here is that jQuery will use the :not pseudo selector if the browser supports it while .not('.hide') will filter the result set after the fact. The former being slightly faster if you have a huge amount of elements.

fdomn-m Over a year ago

Can you add an explanation how this is any different from the code that was in the question?

max Over a year ago

Well for starters it does not have a syntax error... The error in the OP's code was so small that I don't feel a lengthy explanation is need.

fdomn-m Over a year ago

No "lengthy" explanation, but a simple "you missed a quote" might have been the problem (however unlikely). Without any explanation, it looks like you just copied the question, fixed the typo then changed how it worked to add a colour instead of returning the count (despite the question asking for the count) - ie it looks like this adds nothing. Do you see why I asked?

AlexBerd · Accepted Answer · 2015-11-10 13:13:47Z

1

How about this one:

var hideClassLabels=$('label.hide');
var notHideLabels=$('label.status-label').not(hideClassLabels);
console.log(notHideLabels.length);

Hope this helps

answered Nov 10, 2015 at 13:13

AlexBerd

1,5042 gold badges20 silver badges40 bronze badges

Collectives™ on Stack Overflow

jQuery/CSS: count elements with certain classes, but without one specific class

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related