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元素。代码对我来说听起来不错，但它不起作用。我没有发布CSS，因为它无关紧要。任何帮助将不胜感激！

Answer 1

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

下一步。无需两次创建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 2

您似乎正在使用jQuery，但尚未链接到该库。添加以下两行之一（或下载文件并链接到该行），具体取决于您想要的版本。

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>

托架未关闭也存在一些问题。以下代码段显示它在就绪处理程序中没有额外的匿名函数的情况下工作。

＆＃13;

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

＆＃13;

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

＆＃13;

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元素。

5 个答案: