Javascript 正在尝试在for循环中运行jQuery.clone（）以追加元素x次，但得到的输出超出了预期演示测试 $（文档）.ready（函数（）{ for（设i=1；i_Javascript_Html_Jquery_For Loop_Clonenode

Javascript 正在尝试在for循环中运行jQuery.clone（）以追加元素x次，但得到的输出超出了预期演示测试 $（文档）.ready（函数（）{ for（设i=1；i

javascript html jquery for-loop

Javascript 正在尝试在for循环中运行jQuery.clone（）以追加元素x次，但得到的输出超出了预期演示测试 $（文档）.ready（函数（）{ for（设i=1；i,javascript,html,jquery,for-loop,clonenode,Javascript,Html,Jquery,For Loop,Clonenode,可以声明需要在for循环外部克隆的元素，然后使用insertAfter（克隆）；在该div之后插入演示代码：演示测试 $（文档）.ready（函数（）{ var cloned=$（“.test”）//在外部声明此 for（设i=1；i

可以声明需要在for循环外部克隆的元素，然后使用

insertAfter（克隆）；

在该div之后插入

演示代码：


演示
测试
$（文档）.ready（函数（）{
var cloned=$（“.test”）//在外部声明此
for（设i=1；i<5；i++）{
clone.clone（）.insertAfter（克隆）；//插入相同的
}
});

这是因为每次在容器中附加

.test

时，它都会使用

.test

类来增加元素的数量。因此

clone

就是克隆所有元素。您可以使用

first

仅获取第一个元素，然后再附加它

$（文档）.ready（函数（）{
for（设i=1；i<5；i++）{
$（“.test”）.first（）.clone（）.appendTo（“.innerContainer”）；
}
})；


测试
每次你的克隆（）
再次运行，所有元素都会出现这种情况。测试当时存在的元素，这就是它们成倍增长的原因。你正在克隆1，然后是2，然后是4，等等。我相信这是正确的，我也意外地找到了另一种方法，通过javascript创建元素并按原样执行脚本。
<!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>