在div set中将每个span标记中的<span>动态添加到相等的高度

Question

我尝试创建此但未设置，div高度固定为50px和最大跨度 加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

请查看更新的代码：

我改变了这个：

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

请尝试此代码： -

$（本）。每个（＆＃39; .item＆＃39）。高度（HIG /总数）;使用$（this）.find（＆＃39; .item＆＃39;）。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 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>

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