For 루프가 예상대로 작동하지 않습니다 (jQuery 사용)

Question

JavaScript를 사용하여 for 루프의 기본 전제를 ​​이해하지만 .each을 사용하면 나를 피할 수 있습니다.

var col = [1, 2, 3, 4, 5, 6]; 

for (var i = 0; i < col.length; i++) { 
    $('p').html(col[i]); 
} 

대량으로 계속 만들어 낸다 어느 :

<p> 6 </p> 
<p> 6 </p> 
<p> 6 </p> 

내가 기대 될 때 :

<p> 1 </p> 
<p> 2 </p> 
<p> 3 </p> 

왜이 예상대로 작동, 어떻게 순수한보다는, jQuery를 함께 할 수 없습니다 자바 스크립트?

http://jsfiddle.net/rgD92/2/

Answer 1

See the code below을 :

var col = [1, 2, 3, 4, 5, 6]; 
$('p').each(function(index){ 
    $(this).text(col[index]); 
}); 

코드가 작동하지 않는 이유는 무엇입니까?

루프 내에서 "col"목록을 반복 할 때 모든 참조 <p> 요소를 취했습니다. 마지막 상호 작용이 발생하면 숫자는 모두 <p> 요소에 설정됩니다.

업데이트 :

var col = [1, 2, 3, 4, 5, 6]; 

$('p').each(function(index){ 
    $(this).text(col[index % col.length]); 
}); 

Demo

난이 도움이되기를 바랍니다 : 당신이 col 목록의 숫자보다 더 많은 <p> 요소가있는 경우

, 당신은 아래의 코드처럼 % 연산자를 사용할 수 있습니다 .

Answer 2

당신은 모든 반복에 문서의 모든 p 요소를 업데이트,도 업데이트 할 p 선택해야합니다.

.eq()을 사용하여 p 요소를 순차적으로 선택할 수 있습니다.

for (var i = 0; i < col.length; i++) { 
    $('p').eq(i).html(col[i]); 
} 

데모 : Fiddle는

Answer 3

귀하의 $('p') 선택은 '페이지에서의 당신의 루프는 모든 p 업데이트'의 모든 p를 선택 너무들.

var col = [1, 2, 3, 4, 5, 6]; 

for (var i = 0; i < col.length; i++) { 
    $('p:eq(' + i + ')').html(col[i]); 
} 

JSFiddle

Answer 4

당신은 간단하게 할 수있는 :

$('p').text(function(i){ 
    return col[i]; 
}); 

JS Fiddle demo합니다.

이렇게하면 명시 적 for 루프를 사용하는 대신 jQuery가 컬렉션 자체를 반복 할 수 있습니다. 다른 대답에 귀하의 코멘트에서 알 수 있듯이

이 경우 루프에 col 텍스트/내용을 원하는 배열은 p 요소의 수보다 짧아야한다 :

$('p').text(function(i){ 
    return col[i % col.length]; 
}); 

JS Fiddle demo.

참고 :

• JavaScript Arithmetic Operators.
• text().

Answer 5

jQuery 및 each()를 사용하여, 당신은 할 수 :

var col = [1, 2, 3, 4, 5, 6]; 
$("p").each(function(i) { 
    $(this).html(col[i]); 
});