Need to find out children div's from parent div

Question

I am struggling to calculate the length of the children div's, from the parent class name if there are same parent class names.ie, example is

<div class="main-div">
   <div class="parent">
       <div class="child"></div>
       <div class="child"></div>
       <div class="child"></div>
       <div class="child"></div>
    </div>
    <div class="parent">
       <div class="child"></div>
       <div class="child"></div>
       <div class="child"></div>
       <div class="child"></div>
    </div>
</div>

this is my code I want to calculate length of the child div's separately from each parent div but i am getting total of whole child class divs ie, I want to calculate only first parent class children then output will be 4 but I am getting 8. I need to vary them separately and find the length.

my jquery is

var countdiv = $('.parent').children('.child').length;
if( countdiv > 1 ){
   something here ..
}

Answer 1

You need to iterate parent div s

 $( "div.parent" ).each( function(){ console.log( "number of children for " + $( this ).index() + "th parent div is " + $( this ).children( ".child" ).length ) }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="main-div"> <div class="parent"> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> </div> <div class="parent"> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> </div> </div> 

Answer 2

You can use .each function

$('.parent').each(function(){
    var countDiv = $(this).children('.child').length;
    // do something here
});

Live demo here

More information on .each function can be found here

Answer 3

Try this selector to get the 1st child:

 $(document).ready(function() { var countdiv = $('.main-div .parent:first-child').children('.child').length; alert(countdiv); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="main-div"> <div class="parent"> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> </div> <div class="parent"> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> </div> </div>