Question

我在循环中遇到循环问题。

通过选择数字并单击“生成框”按钮，它会生成包含1到49之间数字的框。如果你第一次点击一切正常。但是如果你添加更多的盒子，它会再次将这49个数字添加到现有的盒子中。那就是问题所在。我只想生成1到49之间数字的新方框。

这是代码：

function kasterl() {
    $(".plunder").click(function() {
        var wert = $( "#wieviel option:selected").text();       
        MyInt = parseInt(wert);     
        createKaesten(MyInt);   
    });
}   

function createKaesten(zahl) {
    var gesamt = $(".kasten").length+1;
    var numberOf = $(".kasten").length; 

    for(var i=1; i<=zahl; i++) {
        $(".rahmen").append("<div class='kasten nr"+ gesamt +"'><ul></ul></div>");
    }           

    for(var n=1; n<=49; n++) {
        $(".kasten ul").append("<li class='nummer'>" + n + "</li>");
    }       
}

在这里你可以测试它：link for testing

Answer 1

请注意您使用函数$().append()

的代码

追加就是这样 - 它将新内容添加到现有内容的末尾。每次单击生成时都会执行追加。

编辑：我添加了codepen来说明这一点。多次按下每个按钮以查看差异。

Answer 2

如您所见，$(".kasten ul").append(...)会附加到与".kasten ul"选择器匹配的所有元素。

你说你在循环中遇到了一个＆＃34;循环的问题＆＃34;但是你当前的代码实际上并没有嵌套循环。以下是一个实际上嵌套循环的解决方案：

＆＃13;

function createKaesten(zahl) {
  var gesamt = $(".kasten").length + 1;
  var numberOf = $(".kasten").length;
  var newUL;

  for (var i = 1; i <= zahl; i++) {
    newUL = $("<ul></ul>");
    for (var n = 1; n <= 5; n++) {                       
      newUL.append("<li class='nummer'>" + n + "</li>");
    }
    $("<div class='kasten nr" + gesamt + "'></div>").append(newUL).appendTo(".rahmen");
  }
}

$("button").click(function() {
  createKaesten(3);
});

＆＃13;

li { display: inline-block; padding: 0 10px; }
.kasten { border: thin black solid; margin: 2px; padding: 0px; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button>Test</button>
<div class="rahmen"></div>

＆＃13;

外部循环创建一个新的空UL，然后内部循环将新的LI项附加到该UL，然后我们创建一个DIV，将新的UL附加到它，然后将DIV附加到.rahmen"容器

（请注意，出于演示目的，每次点击按钮只会添加3 x 5个项目，而不是x 49个项目，并且我已经将LI设置成水平横向页面，以便它可以更容易看到发生了什么。点击＆＃34;运行代码段＆＃34;尝试一下。）

循环中的循环 - Javascript

2 个答案: