Java Script, jQuery : .each () 함수 사용, 구현, 예제

Java Script, jQuery : .each () 함수 사용, 구현, 예제

 

배열 또는 객체와 같은 다른 데이터 세트를 반복 할 수있는 jQuery each() 함수의 사용법을 살펴 보겠습니다.

jQuery each()은 jQuery에서 가장 많이 사용되는 함수 중 하나이므로 수행 할 수 있는 작업을 이해하는 것이 중요하다고 생각합니다.

jQuery 각 함수는 데이터를 반복하는 데 사용되는 가장 쉬운 방법은 다른 언어의 foreach 루프와 유사하다는 것입니다.

예를 들어 페이지의 모든 링크에 target = "_blank"를 추가하려는 경우 모든 링크를 선택하고 추가 할 각 링크를 반복합니다. 예를 들어 동일한 선택기에서 여러 DOM 객체를 반복하는 데 사용할 수 있습니다.

 

<br></br>
$('a').each(function(i){
    $(this).attr('target', '_blank');
});
<br></br>

 

 

이것이 어떻게 작동하는지 알 수 있습니다. 먼저 다음 셀렉터를 사용하여 페이지의 모든 앵커 링크를 가져옵니다.

 

// Get all anchor links
$('a')

 

 

다음으로 각 함수를 사용하여 모든 링크를 반복합니다.

$('a').each(function(i){
    // Performs tasks to each of the links
});

 

 

 

각 함수 안에있을 때 this 키워드를 사용하여 루프를 통해 현재 요소에 액세스 할 수 있지만 이 객체는 jQuery 객체가 아니므로 DOM 요소 인 경우 jQuery 함수를 사용할 수 없습니다 그 위에, 이 문제에 대한 해결책은 이것을 jQuery 객체 정의 자 안에 래핑하는 것입니다.

$('a').each(function(i){
    // Performs tasks to each of the links
    $(this);
});

 

 

jQuery 객체 내에 현재 루프 요소가 있으면 attr 함수를 사용하여 링크에 새 속성을 추가 할 수 있습니다.

<br></br>
$('a').each(function(i){
    $(this).attr('target', '_blank');
});
<br></br>

 

 

루프의 현재 색인 가져 오기

 

 

위의 예에서는 function () 매개 변수 안에 i가 있습니다. 이 변수는 각각의 현재 색인으로 채워져 이 작업 페이지에 10 개의 링크가 있습니다.

<a>Link 1</a>
<a>Link 2</a>
<a>Link 3</a>
<a>Link 4</a>
<a>Link 5</a>
<a>Link 6</a>
<a>Link 7</a>
<a>Link 8</a>
<a>Link 9</a>
<a>Link 10</a>

 

 

그런 다음 사용자에게 경고하여 현재 색인을 출력할 수 있습니다.

$('a').each(function(i){
    alert(i);
});

 

 

 

루프 스루 어레이

위의 예에서 DOM 요소를 선택하고 반복하는 방법을 보았지만 이를 사용하여 데이터 배열을 반복하고 배열 내부의 위치 값과 인덱스를 모두 얻을 수 있습니다.

var fruit = ['orange', 'apple', 'banana', 'grapes', 'kiwi'];

$.each(fruit, function(index, value){
  console.log(index + ' ' + value);
});

 

 

콘솔에서 다음을 출력합니다. "0 주황색" "1 사과" "2 바나나" "3 포도" "4 키위"

배열을 사용하지 않고 데이터를 저장하기 위해 객체를 사용하는 경우 각 함수는 다음 코드에서 볼 수 있는 것과 같은 방식으로 처리합니다.

var fruitObj = {
   1: 'orange',
   2: 'apple',
   3: 'banana',
   4: 'grapes',
   5: 'kiwi'
};

$.each(fruitObj, function(key, value){
  console.log(key + ' ' + value);
});

 

 

객체를 통한 루핑 출력은 다음과 같습니다. "오렌지 1 개" "애플 2 개" "바나나 3 개" "포도 4 개" "키위 5 개"