CODEWITHSUNDEEP
javascriptjqueryhtml
Vinit Divekar
Vinit Divekar

Reputation: 918

jQUERY: Count elements which have do not have a class

I want to get the number of span tags which have class assigned-names but do not have a class named hidden. Following is the HTML code:

<div class="assigned-values">
    <span class="assigned-names">
          <span class="name">Test 1</span>
    </span>
    <span class="assigned-names hidden">
          <span class="name">Test 2</span>
    </span>
    <span class="assigned-names hidden">
          <span class="name">Test 3</span>
    </span>
</div>

So, for the above HTML, The number of span tags which have class assigned-names but do not have class hidden is 1.

I have tried following code, but it gives me length as 2:

$('.assigned-values').find('span.assigned-names:not(:has(.hidden))').length

Upvotes: 0

Views: 859

Answers (3)

Gary Mendonca
Gary Mendonca

Reputation: 2173

First of all, your JQuery code has missed an 's' in 'span.assigned-name'

I have tried the following code and it works

var element = $('.assigned-values').find('span.assigned-names').not('.hidden').length
console.log(element.length);

The code outputs the value as 1

Upvotes: 0

Kiran Shahi
Kiran Shahi

Reputation: 7980

You can use .not('span.hidden'). .not() method remove elements from the set of matched elements.

console.log($('.assigned-values').find('span.assigned-names').not('span.hidden').length)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="assigned-values">
    <span class="assigned-names">
          <span class="name">Test 1</span>
    </span>
    <span class="assigned-names hidden">
          <span class="name">Test 2</span>
    </span>
    <span class="assigned-names hidden">
          <span class="name">Test 3</span>
    </span>
    <span class="assigned-names">
          <span class="name">Test 1</span>
    </span>
</div>

Upvotes: 1

31piy
31piy

Reputation: 23859

You can simply filter out the non-required elements using not() function:

const elems = $(".assigned-values > .assigned-names").not(".hidden");
console.log(elems.length);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="assigned-values">
  <span class="assigned-names">
          <span class="name">Test 1</span>
  </span>
  <span class="assigned-names hidden">
          <span class="name">Test 2</span>
  </span>
  <span class="assigned-names hidden">
          <span class="name">Test 3</span>
  </span>
</div>

Upvotes: 2

Related Questions