CODEWITHSUNDEEP
jquery
Tncmk
Tncmk

Reputation: 169

How to count DIV with specific classes

I want to count the DIVs with specific class names and then add the number in H2 tag

Desired outcome

<h2 id="result">5 Cards found</h2>

<div class="post_card"></div>
<div class="post_card"></div>
<div class="post_card"></div>
<div class="post_card"></div>
<div class="post_card"></div>

Upvotes: 0

Views: 72

Answers (3)

s.kuznetsov
s.kuznetsov

Reputation: 15213

You can like this, using the length.

var count_post = $(".container .post_card").length;
var count_post_no = $(".container .no_post_card").length;

$('#result').append(count_post);
$('#result2').append(count_post_no);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="post_card"></div>
  <div class="post_card"></div>
  <div class="post_card"></div>
  <div class="post_card"></div>
  <div class="post_card"></div>
  <div class="no_post_card"></div>
  <div class="no_post_card"></div>
  <div class="no_post_card"></div>
</div>

<h2 id="result">Result (post_card): </h2>
<br>
<h2 id="result2">Result (no_post_card): </h2>

Upvotes: 0

Bhavin Solanki
Bhavin Solanki

Reputation: 4818

Here is your live example.

$(document).ready(function(){
  $('#result').html($('.post_card').length + " Cards found");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2 id="result">5 Cards found</h2>

<div class="post_card"></div>
<div class="post_card"></div>
<div class="post_card"></div>
<div class="post_card"></div>
<div class="post_card"></div>
<div class="post_card"></div>
<div class="post_card"></div>
<div class="post_card"></div>
<div class="post_card"></div>
<div class="post_card"></div>
<div class="post_card"></div>
<div class="post_card"></div>

Upvotes: 1

Carsten L&#248;vbo Andersen
Carsten L&#248;vbo Andersen

Reputation: 27041

You can do it like this:

$('#result .count').html($('.post_card').length)

I've added a span yo your html as a container for the counted value, then we don't have to include the text Cards found in the return.

Demo

$('#result .count').html($('.post_card').length)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2 id="result"><span class="count"></span> Cards found</h2>

<div class="post_card"></div>
<div class="post_card"></div>
<div class="post_card"></div>
<div class="post_card"></div>
<div class="post_card"></div>

Upvotes: 1

Related Questions