2011-02-04 19 views
1

내 asp.net mvc 응용 프로그램에서 javascript를 통해 동적 div를 만들었습니다. 이것은 for 루프에서 생성 나는 인덱스 값으로 각 id을 유지한다 :javascript 또는 jquery에서 동적으로 생성 된 div에 html 요소 추가

for (j = 1; j <= count; j++) { 
    $("<div id=" + j + "> Step " + j + "</div>"). 
     hide().appendTo("#parentDiv").fadeIn(); 
} 

지금, 나는 루프 같은 내에서,이 div의 새로운 요소를 추가 할 수 있습니다. 하지만 첨부 할 때 현재 인덱싱 된 div가 표시되지 않으므로 추가 할 수 있습니다. 즉, 같은 루프 내에서 동적으로 생성 된 div 요소에 대해 for 루프에서 html 요소를 동적으로 렌더링하려고합니다. 이것을 어떻게 성취합니까? 수정 : 실제 시나리오를 참조하십시오. 달성하는 방법?

for (j = 1; j <= count; j++) { 
    $("<div id=" + j + "> Step " + j + "</div>").hide().appendTo("#parentDiv").fadeIn(); 
        for (i = 1; i <= count; i++) { 
          $("<div id=" + i + "> Data of column " + i + "</div>"). 
         hide().appendTo("#"+j).fadeIn(); 
         } 

} 
+2

단지는 참고 : 숫자로 시작 ID는 유효한 HTML 수 없습니다. –

+0

@Andy E XHTML 1.0까지는 작동하지만 HTML5에는 유효하다는 것을 추가하기 만하면됩니다. – Sotiris

+0

Andy E가 숫자로 시작하는 ID가 유효하지 않으므로 –

답변

2
<script src="jquery.js"></script> 
<style> 
#hello{ 
    height: 100px; 
    width: 500px; 
    background: blue; 
} 

.small{ 
    margin-top: 10px; 
    height: 60px; 
    width: 500px; 
    background: red; 
} 

.smallest{ 

    margin-top: 10px; 
    height: 10px; 
    width: 500px; 
    background: green; 

} 
</style> 
<script> 
$(function(){ 
for (j = 1; j <= 5; j++) { 

    var div = $("<div></div>").attr({"id": "div"+j , 'class': 'small'}).appendTo($('#hello')); 
    //create some variable and add to var div 
    $('<div></div>').attr({"class": 'smallest'}).appendTo(div); 
    $('<div></div>').attr({"class": 'smallest'}).appendTo(div); 
    $('<div></div>').attr({"class": 'smallest'}).appendTo(div); 
    } 




}); 
</script> 
<div id="hello"></div> 
+0

이게 저를 위해 작동하지 않습니다 –

+0

@Lalit this workd –

+0

고마워, 저에게 도움이됩니다. –

0

이렇게하면됩니다.

var count = 10 
for (j = 1; j <= count; j++) { 
    $("<div id=a" + j + "> Step " + j + "</div>").hide().appendTo("#parentDiv").fadeIn(); 
    $('#a' + j).html("test" + j); 
} 
+1

에 "a"가 추가되었습니다. 정말로 정말로 생각하지 마라. 하지만 어쨌든 그것을 추가했습니다. – michaelalm

+0

여기에 $ ('# a'+ j) .html ("test"+ j); –

2

먼저 ID에 숫자 만 할당하면 안됩니다. 올바른 ID는 영문자로 시작해야합니다. 스크립트에서 나중에 해당 ID를 사용하여 새 개체를 참조 할 수 있어야합니다. 귀하의 질문의 나머지 부분은 암호입니다 ...

이벤트를 첨부하려는 경우주의해야합니다. live() 메소드를 사용해야합니다. 클래식 bind() 또는 해당 바로 가기 click(), hover() 등은 동적 요소 추가 요소에서 작동하지 않습니다.

HTH

이 한 번 봐 걸릴 수도 있습니다
+0

알파벳을 할당하려했으나 찾지 못했습니다 –

관련 문제