루프 내의 루프 - 자바 스크립트

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

찾을 수 있듯이 $(".kasten ul").append(...)은 에 모두 개의 요소가 ".kasten ul" 선택기와 일치합니다.

"루프 내의 루프"에 문제가 있지만 현재 코드가 실제로 루프를 중첩하지 않는다고하셨습니다. 실제로 중첩 루프를 수행하는 솔루션입니다 :

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>

외부 루프 비어있는 새 UL를 만들고, 그럼 내부 루프는 우리가 만들고, 그 UL에 새로운 LI 항목을 추가 DIV, 새 UL을 추가 한 다음 .rahmen" 컨테이너에 DIV를 추가하십시오.

(데모 목적으로 버튼을 클릭 할 때마다 x 49 항목이 아닌 3 x 5 항목 만 추가되며, LI가 페이지를 가로 질러 가로 지르도록 스타일을 지정하여 어떤 일이 일어나는지 쉽게 볼 수 있습니다. "Run code snippet"을 클릭 해보십시오.

Answer 2

주 당신은을 사용하는 코드에 함수 $().append()

그냥 추가하면 기존 콘텐츠의 끝에 새로운 콘텐츠가 추가됩니다. 생성을 클릭 할 때마다 Append가 실행됩니다.

편집 : 이것을 설명하기 위해 codepen을 추가했습니다. 차이를 보려면 각 단추를 여러 번 누르십시오.