Jquery 动态添加<；span>；在div中，将每个跨度标记设置为相等高度

我尝试创建这个，但没有设置，div高度是固定的50px和最大跨度 加上5

$（'section.group'）。每个（函数（）{
//警报（$（this.find（'.item'））.length）；
var hig=50；
var total=（$（this）.find（'.item'））.length；
如果（总计！==0）{
//警报（高/总）；
//$（'.item'）。高度（高/总）；
$（此）。每个（“.item”）。高度（高/总）；
}
}
);
section.group{
高度：50px；
边缘底部：10px；
溢出：隐藏；
边框：1px实心；
}
.项目{
显示：块；
}
.项目：第n个孩子（1）{
背景：#ff0000；
}
.项目：第n个孩子（2）{
背景：#00ff00；
}
.项目：第n个孩子（3）{
背景：#0000ff；
}
.项目：第n个孩子（4）{
背景：#000；
}
.项目：第n个孩子（5）{
背景：F000；
}
请查看更新的代码：

我改变了这一点：

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

致：


$（'section.group'）。每个（函数（）{
//警报（$（this.find（'.item'））.length）；
var hig=50；
var total=（$（this）.find（'.item'））.length；
如果（总计！==0）{
//警报（高/总）；
//$（'.item'）。高度（高/总）；
$（this）.find（'.item'）.height（高/总）；
}
}
);
section.group{
高度：50px；
边缘底部：10px；
溢出：隐藏；
边框：1px实心；
}
.项目{
显示：块；
}
.项目：第n个孩子（1）{
背景：#ff0000；
}
.项目：第n个孩子（2）{
背景：#00ff00；
}
.项目：第n个孩子（3）{
背景：#0000ff；
}
.项目：第n个孩子（4）{
背景：#000；
}
.项目：第n个孩子（5）{
背景：F000；
}
请尝试以下代码：-

$（此）。每个（“.item”）。高度（高/总）；用$（this.find（'.item'）.height（hig/total）进行回复


请在这里找到答案。代码如下所示：

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

CSS:

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