CODEWITHSUNDEEP
javascripthtmlcss
TeoAlmonte
TeoAlmonte

Reputation: 107

Add a class depending on number of elements

What would be a good way to add a class to a series of elements depending on how many of them existed?

so in this case if there are two or less items the class is "half" - if there are less than 8 it should be the "quarter" class applied to them.

Is there a way to add/remove a class depending on how many "item" (s) there are in a section?

<section>
 <div class="item half"> 1 </div>
 <div class="item half"> 2 </div>
 </section>


   <section>
 <div class="item quarter"> 1 </div>
 <div class="item quarter"> 2 </div>
 <div class="item quarter"> 3 </div>
 <div class="item quarter"> 4 </div>
 <div class="item quarter"> 5 </div>
 </section>

Upvotes: 1

Views: 309

Answers (2)

Repo
Repo

Reputation: 1745

You could try this:

$(document).ready(function(){
  $('section').each(function(i, sect){
    var itemsInSection = $(sect).children('.item');
    var count = itemsInSection.length;
    if(count < 3){
      itemsInSection.addClass('half');
    }else if(count < 8){
      itemsInSection.addClass('quarter');
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
 <div class="item half"> 1 </div>
 <div class="item half"> 2 </div>
 </section>


   <section>
 <div class="item quarter"> 1 </div>
 <div class="item quarter"> 2 </div>
 <div class="item quarter"> 3 </div>
 <div class="item quarter"> 4 </div>
 <div class="item quarter"> 5 </div>
 </section>

Upvotes: 2

kiranvj
kiranvj

Reputation: 34117

You can always get the count of your elements like

var elems = document.querySelectorAll(".item");
var count = elems.length;

if(count < 2) {
// add class half
} else if (count < 8) {
// add class quarter
}

Upvotes: 3

Related Questions