A loop within a loop - Javascript

Question

I have a problem with a loop inside a loop.

By selecting the number and clicking the "Generate boxes" button it generates boxes with numbers from 1 to 49. If you click the first time everything works fine. But if you add more boxes it once again adds those 49 numbers to the already existing boxes. That's the problem. I only want to generate new boxes with numbers from 1 to 49.

This is the code:

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>");
    }       
}

And here you can test it: link for testing

That's what you get with that horrid indentation scheme (tnx @endless for screwing up the point I was trying to make :P) — PeeHaa, Sep 03 '16 at 23:45
Yes I know. But I have to do it like this. Or how could I do it? — Marcel, Sep 03 '16 at 23:47

Rodney Wells · Answer 1 · 2016-09-04T00:49:56.687

0

Note in the code that you use the function $().append()

Appending does just that - it appends new content to the end of existing content. Append will be executed every time you click generate.

Edit: I added a codepen to illustrate this. Hit each button multiple times to see the difference.

edited Sep 04 '16 at 00:49

answered Sep 03 '16 at 23:46

Rodney Wells

833
1
7
9

you have to do append in jquery, don't you? document.write doesn't work. – Marcel Sep 04 '16 at 00:27
You can overwrite the contents of a div without simply adding to the end of the div. See http://stackoverflow.com/questions/1309452/how-to-replace-innerhtml-of-a-div-using-jquery for additional information. – Rodney Wells Sep 04 '16 at 00:40

nnnnnn · Accepted Answer · 2016-09-04T01:14:08.670

As you have found, $(".kasten ul").append(...) will append to all elements that matched the ".kasten ul" selector.

You said you had a problem with a "loop within a loop", but your current code doesn't in fact nest the loops. Following is a solution that actually does nest the loops:

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);
});

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

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

The outer loop creates a new, empty UL, then the inner loop appends the new LI items to that UL, then we create a DIV, append the new UL to it, then append the DIV to the .rahmen" container.

(Note that for demo purposes each click of the button only adds 3 x 5 items, rather than something x 49 items, and I've styled the LIs to go across the page horizontally so that it's easier to see what's happening. Click "Run code snippet" to try it out.)

Amazing! This really seems to work. Thank you! (And sorry, I've had a variant of a loop inside a loop before. But then I tried and tried and tried .. so this version I posted here was not a loop inside a loop.) — Marcel, Sep 04 '16 at 02:24

A loop within a loop - Javascript

2 Answers2