गतिशील रूप से बराबर ऊंचाई

Question

को div सेट में जोड़ने हर स्पैन टैग मैं इस बनाने का प्रयास करें, लेकिन सेट नहीं, div ऊंचाई निश्चित 50px और अधिकतम अवधि है

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

इस कोड का प्रयास करें: - ('। आइटम')।

$ (इस) .प्रत्येक ऊंचाई (hig/कुल); $ (इस) के साथ प्रतिलिपि बनाने के लिए। ('आइटम')। ऊंचाई (hig/कुल);

---

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

Answer 2

में जोड़ने

कृपया अद्यतन कोड पर एक नज़र डालें:

मैंने इसे बदल दिया:

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

रहे हैं:

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

यहाँ demo प्राप्त करें। कोड के रूप में नीचे दर्शाया गया है:

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> 

जे एस:

$(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') 
      }); 
     } 
    }); 
}); 

सीएसएस:

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