javascript - Jquery 追加同时包装每个 x 元素

Question

我正在尝试创建这样的 HTML:

<div class="container">
   <div class="wrap">
      <div class="el"></div>
      <div class="el"></div>
      <div class="el"></div>
   </div>
   <div class="wrap">
      <div class="el"></div>
      <div class="el"></div>
      <div class="el"></div>
   </div>
   <div class="wrap">
      <div class="el"></div>
      <div class="el"></div>
      <div class="el"></div>
   </div>
</div>

用于添加el的组件元素:

<input type="text" name="elements" />

el元素将根据输入中添加的数字附加到容器。每 3 个元素应包含在 wrap 中分区。

到目前为止我所拥有的:

$("input[name=elements]").on("keydown keyup", function() {
   var amount = parseInt($(this).val());
   for(i = 0; i < amount; i++) {
     $(".container").append('<div class="el"></div>');
   }
});

它添加了 el divs 但我不知道如何同时将每 3 个包装在 wrap 中。是否也可以删除 el div？如果说我首先输入 8然后我在输入中输入 3 ，将添加 11 个 div，而不是只有 3 个。换句话说，el 的数量HTML 中的 div 应始终等于输入值中的数字。每次输入类型时先清除 HTML 有意义吗？

Answer 1

您可以首先根据输入值的数量创建一个元素数组，将其附加到容器中，然后将每个第 n 个元素包装到 wrap 元素中。

const container = $('.container')

$("input").on('keyup', function() {
  const val = parseInt($(this).val()) || 0;
  const html = Array.from(Array(val), () => (
    $("<div>", {
      'class': 'el',
      'text': 'element'
    })
  ))

  container.html(html)

  for (let i = 0; i < val; i += 3) {
    container
      .find('.el')
      .slice(i, i + 3)
      .wrapAll("<div class='wrap'></div>");
  }
})

.wrap {
  border: 1px solid green;
  margin: 10px 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text">
<div class="container"></div>