CODEWITHSUNDEEP
javascriptjqueryhtml
mr.
mr.

Reputation: 679

how to append child divs to parent divs equally with using same class in jquery?

I have a following html 

    <div class="parent"><div class="child"></div></div>
    <div class="parent"><div class="child"></div></div>
    <div class="parent"><div class="child"></div></div>
    <div class="parent"><div class="child"></div></div>
    <div class="parent"><div class="child"></div></div>
    <div class="parent"><div class="child"></div></div>

initially all parent divs has one child div. I am trying to append new child divs to parents equally.For example if 1,2,3 parent div has 2 child and the others have only one, i should append new child to 4. parent div. Is there any short way in jquery to do this without looping all of parants and testing the number of divs they have ?

Upvotes: 0

Views: 218

Answers (1)

wonderbell
wonderbell

Reputation: 1126

You can use function _.minBy from beautiful lodash

var minDiv = _.minBy($('div.parent'), function(item) {
    return $(item).find('div.child').length;
  });

  $(minDiv).append('<div class="child"></div>');

See the working fiddle and thank the contributors of this awesome library.

Upvotes: 2

Related Questions