Dynamically add a <span> to the div so that each span tag is equal to the height

Question

I try to create this but not set, div height is fixed at 50px and add maximum range to 5

$('section.group').each(function() { //alert(($(this).find('.item')).length); var hig =50; var total =($(this).find('.item')).length; if(total !== 0){ //alert(hig/total); //$('.item').height(hig/total); $(this).each('.item').height(hig/total); } } ); 

 section.group{ height:50px; margin-bottom:10px; overflow:hidden; border:1px solid; } .item{ display:block; } .item:nth-child(1) { background: #ff0000; } .item:nth-child(2) { background: #00ff00; } .item:nth-child(3) { background: #0000ff; } .item:nth-child(4) { background: #000; } .item:nth-child(5) { background: #f0f000; } 

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <section class="group"> <span class="item"></span> <span class="item"></span> <span class="item"></span> </section> <section class="group"> <span class="item"></span> <span class="item"></span> <span class="item"></span> <span class="item"></span> <span class="item"></span> </section> <section class="group"> <span class="item"></span> <span class="item"></span> </section> <section class="group"> </section> 

Answer 1

Please try this code: -

$ (this) .each height (HIG / total) ('clause.). to replace $ (this) .find ('. item'). height (hig / total);

---

  $('section.group').each(function() { var hig =50; var listitem =($(this).find('.item')).length; if(listitem !== 0){ $(this).find('.item').height(hig/listitem); } } ); 

Answer 2

Please see the updated code:

I changed this:

 $(this).each('.item').height(hig/total); 

in

 $(this).find('.item').height(hig/total); 

 $('section.group').each(function() { //alert(($(this).find('.item')).length); var hig =50; var total =($(this).find('.item')).length; if(total !== 0){ //alert(hig/total); //$('.item').height(hig/total); $(this).find('.item').height(hig/total); } } ); 

 section.group{ height:50px; margin-bottom:10px; overflow:hidden; border:1px solid; } .item{ display:block; } .item:nth-child(1) { background: #ff0000; } .item:nth-child(2) { background: #00ff00; } .item:nth-child(3) { background: #0000ff; } .item:nth-child(4) { background: #000; } .item:nth-child(5) { background: #f0f000; } 

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <section class="group"> <div class="item"></div> <div class="item"></div> <div class="item"></div> </section> <section class="group"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </section> <section class="group"> <div class="item"></div> <div class="item"></div> </section> <section class="group"> </section> 

Answer 3

Here you can find a demo . The code is as follows:

HTML:

 <section class="group"> <span class="item"></span> <span class="item"></span> <span class="item"></span> </section> <section class="group"> <span class="item"></span> <span class="item"></span> <span class="item"></span> <span class="item"></span> <span class="item"></span> </section> <section class="group"> <span class="item"></span> <span class="item"></span> </section> <section class="group"></section> 

JS:

 $(function () { $('section.group').each(function (k, v) { var hig = 50; var total = ($(this).find('.item')).length; if (total != 0) { var equalHeight = (hig / total); $(this).find('span.item').css({ 'height': (equalHeight + 'px') }); } }); }); 

CSS

 section.group { height: 50px; margin-bottom: 10px; overflow: hidden; border: 1px solid; } .item { display: block; } .item:nth-child(1) { background: #ff0000; } .item:nth-child(2) { background: #00ff00; } .item:nth-child(3) { background: #0000ff; } .item:nth-child(4) { background: #000; } .item:nth-child(5) { background: #f0f000; }