CODEWITHSUNDEEP
jqueryhtmlcss
Kapil
Kapil

Reputation: 1141

Dynamically add <span> in div set every span tag to equal height

I try to create this but not set, div height is fixed 50px and maximum span add in 5 enter image description here

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

Upvotes: 6

Views: 735

Answers (3)

Mitul Patel
Mitul Patel

Reputation: 154

Please try This Code :-

$(this).each('.item').height(hig/total); to replce with $(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);          
            }
          }
        );

Upvotes: 1

Shashank
Shashank

Reputation: 2060

Please find the demo here. Code is as illustrated below:

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

Upvotes: 2

vijayP
vijayP

Reputation: 11512

Please have a look at updated code:

I changed this:

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

to:

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

Upvotes: 2

Related Questions