Dynamicznie dodać <span> w div zestawie każdy tag rozpiętości do równego wysokości

Question

staram się stworzyć to, ale nie jest ustawiony, div wysokość jest stała 50px a maksymalna rozpiętość dodać w 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

Spróbuj ten kod: - (. 'Element').

$ (this) .each wysokości (hig/całkowity); do uzupełnienia za pomocą $ (this) .find ('. item'). height (najwyższa/całkowita);

---

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

Answer 2

Proszę spojrzeć na zaktualizowany kod:

Zmieniłem to:

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

do:

$(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

Proszę znaleźć demo tutaj. Kod jest jak pokazano poniżej:

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; 
}