JQuery.each function 사용

JQuery에는 반복문과 같은 each function이 있다. Object나 array 둘다 사용 할 수 있고 javascript의 native loop들보다는 성능이 좀 떨어진다.

jQuery.each( collection, callback(index, value) )

위 형태로 사용이 가능하고 파라미터로 collection(array 또는 object)과 callback function을 가진다. 간단한 예제를 보면 이해가 빠르다.

$.each([52, 97], function(index, value) {
  alert(index + ': ' + value);
});

위 코드에서 collection은 array[52, 97]이 되겠고 callback function은 내부에 바로 구현하였다. 위 array 내부의 index와 그에 해당되는 value를 사용하고 있다
- http://api.jquery.com/jQuery.each/

var obj = {
  "flammable": "inflammable",
  "duh": "no duh"
};
$.each( obj, function( key, value ) {
  alert( key + ": " + value );
});

위 코드를 보면 index, value 쌍을 어떻게 가져가는지 확실히 알 수 있다.

sample

list item 형태에 each를 사용하면 코드를 더 간단하게 짤 수 있다.

  
    

       
    

       
    
.
    .

       
    

위와 같이 여러개의 image들이 들어있는 리스트가 있다. 여러 이미지의 display 속성을 바꿔준다든가 src를 다른 주소로 바꿔준다든가 할 때 js 파일에서 핸들링 한다. 그런데 같은 class명을 가진 li와 img 태그들이기 때문에 photoZone의 배열요소로 다뤄야 한다.

for(var i = 15, cnt = 1; i < $(".photoZone").find(".photoBox").length; i++) {
  if($(".photoZone").find("li").eq(i).css("display") == "none"){
    temp = $(".photoZone").find("li").eq(i).find("img.photoImg").attr("datasrc");

위와 같이 find로 찾아서 for loop를 돌려준다면 코드가 간결하지 못하게 된다. 이럴 때 each function을 사용하면 좋다.

$(".photoZone").find(".photoBox").each(function(idx) {
  if ($(this).css("display") == "none" && count < 16) {
      count ++;
      var eleImg = $(this).find(".photoImg");

      if (eleImg.attr("src") != eleImg.attr("datasrc")) eleImg.attr("src", eleImg.attr("datasrc"));
      $(this).css("display","block");

이런식으로 each function을 사용한 뒤에 각 element는 $(this)로 받아서 처리하면 훨씬 편하다.