javascript - jQuery单击将元素附加到一系列div

Question

我有以下代码：

$('button').click(function(e) {
  e.preventDefault();

  var count = 0;

  if (count < 5) {
    $(".container .column:nth-child(1)").append('<div class="element"></div>');
    count++;
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button type="button">Add</button>

<div class="container">
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
</div>

当我单击按钮时，我想在每列中最多添加 4 个元素，一个接一个。例如，如果我单击按钮 6 次，HTML 将如下所示：

<div class="container">
  <div class="column">
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
  </div>
  <div class="column">
     <div class="element"></div>
     <div class="element"></div>
  </div>
  <div class="column"></div>
  <div class="column"></div>
</div>

element每次我单击一个按钮时，第一列都会增加 1个 div，element限制为 4 个 div。

我怎样才能对下一列做同样的事情？

奖金问题

单击按钮删除元素时是否也可以做相反的事情？

标签： javascriptjqueryhtml

Answer 1

您可以通过使用属性检查其中的s来定位columndiv 。elementlength

此外，您不需要:nth-child(1)财产。

$('.add').click(function(e) {
  e.preventDefault();
  var count = 0;
  if (count < 5) {
    $(".container .column").filter(function() {
        return $(this).children('.element').length < 4;
      }).first()
      .append('<div class="element">e</div>');
    count++;
  }
});

$('.remove').click(function(e) {
  e.preventDefault();
  $(".container .column .element:last").remove();
});

.column {
  border: 1px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="add">Add</button>
<button type="button" class="remove">Remove</button>

<div class="container">
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
</div>

参考：

1. .filter()
2. .first()