1 
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Demo</title>
    </head>
    <body>
        <div class="outerContainer">
            <div class="innerContainer">
                <div class="test">test</div>
            </div>
        </div>
        <script
            src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script>
 
            $(document).ready(function() {
               for(let i=1;i<5;i++) {
                $( ".test" ).clone().appendTo( ".innerContainer" );
                }
            });

    </script>
    </body>
</html>

期望的输出：

<div class="outerContainer">
     <div class="innerContainer">
       <div class="test">test</div>
       <div class="test">test</div>
       <div class="test">test</div>
       <div class="test">test</div>
       <div class="test">test</div>
    </div>
</div>

相反，我得到了更多的元素，将近 20 个。我是 jQuery 和学习的新手。我查看了 jQuery.each() 但似乎该方法适用于数组+对象。

另外，我正在使用 jQuery，因为我需要将 eventListeners 附加到所有克隆的元素，并且事件委托是不可能的，因为这些元素不在 parentContainer 中。

我目前也在测试是否可以使用带有 cloneNode() 的常规 for 循环来附加我的元素，然后可能使用 jQuery.each() 来附加 eventListeners？

4

2 回答 2

1

您可以声明需要在 for 循环之外克隆的元素，然后insertAfter(cloned);在该 div 之后插入。

演示代码： 

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Demo</title>
</head>

<body>
  <div class="outerContainer">
    <div class="innerContainer">
      <div class="test">test</div>
    </div>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      var cloned = $(".test") //declare this outside
      for (let i = 1; i < 5; i++) {
        cloned.clone().insertAfter(cloned); //insert same
      }
    });
  </script>
</body>

</html>

于 2020-11-21T05:40:37.440 回答
0

这是因为每次您.test在容器内部添加内容时，都会增加带有.test类的元素数量。clone克隆所有元素也是如此。您可以使用first仅获取第一个元素，然后附加它

$(document).ready(function() {
  for (let i = 1; i < 5; i++) {
    $(".test").first().clone().appendTo(".innerContainer");
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="outerContainer">
  <div class="innerContainer">
    <div class="test">test</div>
  </div>
</div>
<script

于 2020-11-21T05:46:28.300 回答