jQuery.each(object, callback function)

PHP의 foreach()와 유사한 기능으로 배열 또는 JSON 객체를 그 수만큼 반복하면서 호출할 수 있다.

 

var array = [ "one", "two", "three", "four", "five" ];
var object = { one:1, two:2, three:3, four:4, five:5 };

$.each(array, function() {
    $('#message > ul').append('<li>'+this+'</li>');
});

$.each(object, function(i, value) {
    $('#message > ul').append('<li>'+i+': '+value+'</li>');
});

 

실행전 HTML
<div id="message">
<ul>
    <li><strong><font color=red>each</font></strong></li>
</ul>
</div>

 

실행후 HTML
<div id="message">
<ul>

    <li><strong><font color="red">each</font></strong></li>
    <li>one</li>

    <li>two</li>

    <li>three</li>

    <li>four</li>

    <li>five</li>

    <li>one: 1</li>

    <li>two: 2</li>

    <li>three: 3</li>

    <li>four: 4</li>

    <li>five: 5</li>

</ul>
</div>

 

실행전

• each

실행후

• each
• one
• two
• three
• four
• five
• one: 1
• two: 2
• three: 3
• four: 4
• five: 5

생성한 배열과 JSON 객체 외에도 셀렉터를 사용하여 선택한 다수의 element를 각각 호출할 때에도 사용하기 때문에 jQuery를 다루면서 가장 많이 사용하게 될 Utility이다. 호출 방법은 effect의 callback function에서와 마찬가지로 this를 이용한다.

 

$('div > ul > li').each(function(i) {
    if(this.text() != 'this is li') {
        this.text('this is li!!!');
    }
});

 

실행전 HTML
<div>
<ul>
<li>this is li</li>
<li>this is div</li>
<li>this is li</li>
<li>this is li</li>
</ul>
</div>

 

실행후 HTML
<div>
<ul>
<li>this is li</li>
<li>this is li!!!</li>
<li>this is li</li>
<li>this is li</li>
</ul>
</div>

 

실행전

• this is li
• this is div
• this is li
• this is li

실행후

• this is li
• this is li!!!
• this is li
• this is li