时间戳

首页 > 解决方案 > Jquery在包装每个x元素时追加

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

问题描述

我正在尝试创建这样的 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 个元素应包装在wrapdiv 中。

到目前为止我所拥有的：

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

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

标签： javascriptjqueryhtml

解决方案

您可以首先根据输入值的数量创建一个元素数组，将其附加到容器中，然后将每个第 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>

推荐阅读