尝试创建一个 jquery 'for' 循环，在另一个 div 中添加 div 元素。

Question

HTML:

<!DOCTYPE html>
    <html>
    <head>
        <link rel='stylesheet' type='text/css' href='etch_a_sketch.css'/>
        <script type='text/javascript' src='etch_a_sketch.js'></script>
    </head>
    <body>
        <div class="outer">
        </div>
    </body>
</html>

JS:

$(document).ready(function() {
    $(function() {
        for(i=0; i<16; i++) {
            $('<div class="inner"></div>').appendTo('.outer');
    }
)};

大家好！我试过在这里和其他地方寻找答案，但没有运气。我正在尝试创建一个 jquery 'for' 循环，它将在外部 div 容器中动态生成 16 个 div 元素。代码对我来说看起来不错，但它不起作用。我没有 post CSS 因为它无关紧要。任何帮助将不胜感激！

Answer 1

您似乎正在使用 jQuery，但尚未 link 进入图书馆。添加以下两行之一（或下载文件和 link），具体取决于您想要的版本。

1.x snippet: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
2.x snippet: <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

还有一些括号没有闭合的问题。以下代码段显示它在 ready 处理程序中没有附加匿名函数的情况下工作。

$(document).ready(function() {
  for (i = 0; i < 16; i++) {
    $('<div class="inner">' + i + '</div>').appendTo('.outer');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
</div>

Answer 2

首先。你有语法错误。最后一行 )}; 应该是 }); 。

接下来。无需两次创建 jQuery 对象（也有语法 - } 应该是 })）。

这一行：

$(document).ready(function() {

与此行完全相同：

$(function() {

Reference

因此，总而言之，您应该以这样的方式结束：

$(document).ready(function() {
    for(i=0; i<16; i++) {
         $('<div class="inner">blah</div>').appendTo('.outer');
    }
});

或者这个：

$(function() {
    for(i=0; i<16; i++) {
         $('<div class="inner">blah</div>').appendTo('.outer');
    }
});

JSFiddle

Answer 3

试试这个，

 $(function() {
        var innerHTML=[];
        for(i=0; i<16; i++) {
            innerHTML.push('<div class="inner"></div>');
        }
        $('.outer').html(innerHTML.join(''));
 });

请将 jquery 库添加到您的页面。

Answer 4

$(document).ready (function (){
    for (var i=0; i<=16; i++){
        $ ('.outer').html($('.outer').html()+"<div class='inner'></div>";
    }
});

以上内容非常简单。先试试看。我的理论是 appendTo 不起作用，因为该元素尚不存在？但无论如何它应该工作？此外，您不需要另一个中的匿名函数。

Answer 5

我想建议一个更好的性能，它会在元素很多的情况下加快处理速度

$(document).ready(function() {
    var innerDivs = ""; 
    for(i=0; i<16; i++) {
         innerDivs +='<div class="inner">blah</div>'; 

    }
    $('.outer').append(innerDivs); 
});

这样性能会更好，因为我们不必多次访问 DOM 树

尝试创建一个 jquery 'for' 循环，在另一个 div 中添加 div 元素。

Trying to make a jquery 'for' loop that adds div elements inside another div.

javascript

jquery

for-loop