CODEWITHSUNDEEP
jquerycss
benniy
benniy

Reputation: 101

Count div elements and append a class to their parent container

Being an absolute novice in jquery, I am looking for a way to count div elements / classes within a parent div and prepended a class to this parent depending on how many elements are present. 

<div class="container four_items">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

in the above example, the "container" div is prepended the class "four_items", as it holds four items

<div class="container three_items">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

consecutively, in this example the parent container is prepended "thee_items", as it contains three instances of the div with the "item" class

any help is greatly appreciated

Upvotes: 0

Views: 305

Answers (2)

fdomn-m
fdomn-m

Reputation: 28621

Using a numeric class items_3 you can do this with 

$(".container").addClass(function() {
  return "items_" + $(this).children(".item").length;
});

if you need "three" as text, then this can be indexed into a text array (as detailed in the other answer, so won't duplicate here).

Example snippet with some css to show what's happening:

$(".container").addClass(function() {
  return "items_" + $(this).children(".item").length;
});
.container { float:left; height: 50px; width: 50px; }
.container>.item { border:1px solid #CCC; height:10px; width: 10px; }

.items_4 { border: 1px solid red; }
.items_3 { border: 1px solid green; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Upvotes: 1

turivishal
turivishal

Reputation: 36134

You can do something like this, you need to set string of numbers inside an array like wise i have defined in below example num, I have already set condition on it if not found it will add numeric count on it.

$(document).ready(function(){
    
    // you can add list of numbers as you want
    let num = [
      "zero",
      "one",
      "two",
      "three",
      "four",
      "five"
    ];
    
    // find number of elements
    let num_of_item = $(".container .item").length;
    
    // check if element number is available then its return vlaue from num otherwise its will return original length number
    let find_item_num = num[num_of_item] ? num[num_of_item] : num_of_item;
    
    // this will add "three_items" class in ".container" class   
    $(".container").addClass(find_item_num + "_items");

    // show the list of classes
    console.log($(".container").attr("class"));
    
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Upvotes: 0

Related Questions