我如何计算甚至多个div在jquery中具有相同类的子元素

Question

我想让所有＆＃34;父母＆＃34; elemens有5个子元素。如果＆＃34;父母＆＃34; div只有不到5个孩子，上课＃34;孩子＆＃34;，我想让他们全都出来。

以前的例子：

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

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

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

这应该是结果：

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

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

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

Answer 1

首先选择所有.parent并使用each()获取每个5 - count of exist child的内容。在循环中，您可以计算需要添加的元素的计数。 $(".parent").each(function(){ var count = $(this).children(".child").length; for (var i = 0; i < 5 - count; i++){ $(this).append("<div class='child'>Added Child</div>"); } });是需要添加的元素数。

＆＃13;

＆＃13;

.parent {
    width: 100px;
    border: 1px solid black;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
    <div class="child">Child</div>
    <div class="child">Child</div>
    <div class="child">Child</div>
    <div class="child">Child</div>
</div>
<div class="parent">
    <div class="child">Child</div>
    <div class="child">Child</div>
    <div class="child">Child</div>
</div>
<div class="parent">
    <div class="child">Child</div>
    <div class="child">Child</div>
    <div class="child">Child</div>
    <div class="child">Child</div>
    <div class="child">Child</div>
</div>

＆＃13;

textvariable

＆＃13;

＆＃13;

＆＃13;

Answer 2

获取最大数量，并根据附加额外的div

// get maximum count of children in parent
var count = Math.max.apply(Math, $('.parent').map(function() {
    return $('.child', this).length; // get child count
  }).get())
  // if maximum count is fixed then above code can be avoided
  // instead set `count = 5;`

// iterate parent
$('.parent').each(function() {
  var len = count - $('.child', this).length; // get number of div tobe added
  for (var i = 0; i < len; i++) { // add childrens
    // generate div using jQuery and append it to parent
    $('<div/>', {
      class: 'child'
    }).appendTo(this);
  }
});

.parent {
  border: 1px solid black;
}
.child {
  border: 1px solid red;
  height: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

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

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