CODEWITHSUNDEEP
jquery
Thewx
Thewx

Reputation: 23

Use jQuery to count the number of div's and hide button

I want to use jQuery to tell me how many blocks are in each row and hide button class if blocks are less than 4. Currently trying this, but it doesn't give me the correct result:

$('.row').each(function() {
   if ( ($(this).find('.block')).length < 4) {
      $(this).find('.button').css('display', 'none');
   }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
   <div class="block">Block1</div>
   <div class="block">Block2</div>
   <div class="block">Block3</div>
   <div class="block">Block4</div>
   <div class="block">Block5</div>
   <div class="button">Button</div>
</div>

<div class="row">
   <div class="block">Block1</div>
   <div class="block">Block2</div>
   <div class="block">Block3</div>
   <div class="button">Button</div>
</div>

Upvotes: 0

Views: 68

Answers (1)

Anis R.
Anis R.

Reputation: 6912

Seems to work fine as it is, unless I am misunderstanding your question:

$('.row').each(function() {

   //a console log of the number of blocks
   console.log('Number of blocks: ' + ($(this).find('.block')).length);

   if ( ($(this).find('.block')).length < 4) {
      $(this).find('.button').css('display', 'none');
   }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
   <div class="block">Block1</div>
   <div class="block">Block2</div>
   <div class="block">Block3</div>
   <div class="block">Block4</div>
   <div class="block">Block5</div>
   <div class="button">Button</div>
</div>

<div class="row">
   <div class="block">Block1</div>
   <div class="block">Block2</div>
   <div class="block">Block3</div>
   <div class="button">Button</div>
</div>

Upvotes: 1

Related Questions