jQuery.each()의 5가지 사례

1. jQuery란 무엇인가.each () 2, jQuery의.each () 문법 3, jQuery의.each() 실제 열
1. jQuery란 무엇인가.each()
jQuery의 each () 함수는 대상 jQuery 대상의 모든 요소를 옮겨다니는 데 사용됩니다.독자들이 아직 잘 알지 못하도록 jQuery 대상이 무엇인지 설명해 드리겠습니다.jQuery 대상은 한 개 이상의 DOM 요소를 포함하는 대상을 가리키며 모든 jQuery 함수를 노출시킨다.each () 함수는 여러 요소의 DOM, 임의의 그룹의 순환, 대상의 속성에 매우 적합하다.이 함수를 제외하고 jQuery에는 같은 이름의 보조 함수가 하나 더 있는데, 사전에 DOM 요소를 선택하거나 만들지 않아도 이 보조 함수를 호출할 수 있다.다음 부분에서 그것들을 더욱 상세하게 소개할 것이다.
2. jQuery의.each() 구문
1) jQuery 객체의 $().each () 방법 아래 이 예는 웹 페이지의 모든div 탭을 선택하고 모든div 탭의 index와 ID를 출력합니다.출력 결과는'div0:header','div1:body','div2:footer'일 수 있습니다.jQuery에서 each() 함수의 이런 용법과 효용 함수의 용법은 완전히 다르다.

// DOM ELEMENTS
$('div').each(function (index, value) { 
  console.log('div' + index + ':' + $(this).attr('id')); 
});

2)jQuery.each(object, [callback])는 jQuery 대상의 $()와 다릅니다.each () 방법, 이 방법은 모든 대상을 예로 들 수 있습니다.리셋 함수는 두 개의 매개 변수를 가지고 있다. 첫 번째는 대상의 구성원이나 그룹의 인덱스이고, 두 번째는 대응하는 변수나 내용이다.each 순환을 종료해야 리셋 함수를false로 되돌릴 수 있다면 다른 리셋 값은 무시됩니다.이 예는 하나의 그룹을 어떻게 옮겨다니는지 보여 줍니다.

// ARRAYS
var arr = [
   'one',
   'two',
   'three',
   'four',
   'five'
];
$.each(arr, function (index, value) {
  console.log(value);
  // Will stop running after "three"
  return (value !== 'three');
});
// Outputs: one two three

each에서returntrue는 js 순환 중의continue에 해당하고,returnfalse는break의 마지막 예에서 한 대상의 모든 속성을 두루 훑어보았습니다.

// OBJECTS
var obj = { one: 1, two: 2, three: 3, four: 4, five: 5 };
$.each(obj, function (index, value) { console.log(value); });
// Outputs: 1 2 3 4 5

이 모든 것은 적당한 리셋 함수를 제공한 것으로 귀결된다.이 리셋 함수의 상하문,this는 두 번째 인자, 즉 현재의value값과 같다.보통 상하문은 하나의 대상이기 때문에 원시값을 봉인해야 한다.즉, 이value값과 상하문 사이에는 엄격한 상등 관계가 존재하지 않는다.리셋 함수의 첫 번째 인자는 현재 index입니다. 그룹의 숫자나 대상의 문자열일 수도 있습니다.
셋째, jQuery의.each() 실제 열
1. 기본적인 실례는 each() 함수가 jQuery 대상을 어떻게 처리하는지 살펴보자.첫 번째 예에서 페이지의 모든 a 탭을 선택하고 href 속성을 출력합니다.

$('a').each(function (index, value){
  console.log($(this).attr('href'));
});

두 번째 예에서는 웹 페이지의 모든 외부 체인 href 속성을 출력합니다. (여기서 우리는 HTTP 프로토콜만 사용했다고 가정합니다.)

$('a').each(function (index, value){
  var link = $(this).attr('href');
  if (link.indexOf('http://') === 0) {
        console.log(link);
  }
});

현재 페이지에 다음과 같은 링크가 있다고 가정합니다.

<a href="http://www.jquery4u.com">JQUERY4U</a>
<a href="http://www.phpscripts4u.com">PHP4U</a>
<a href="http://www.blogoola.com">BLOGOOLA</a>

그러면 두 번째 예는 다음과 같은 결과를 출력합니다.

http://jquery4u.com
http://www.phpscripts4u.com
http://www.blogoola.com

주의해야 할 것은 each()에서 jQuery 대상의 DOM 요소를 사용할 때 이 DOM 요소를 다시 봉인해야 한다는 것이다.이것은 jQuery가 실제로는 DOM 요소를 그룹으로 봉인할 뿐이기 때문이다.jQuery each () 방법을 사용하는 것은 사실 일반적인 그룹처럼 이 그룹을 교체하는 것이다.따라서 교체기에서 봉인된 원소를 얻을 수 없다.
2. 배열 인스턴스
우선 each () 가 일반 그룹을 어떻게 처리하는지 봅시다.

var numbers = [1, 2, 3, 4, 5, 6];
$.each(numbers , function (index, value){
  console.log(index + ':' + value); 
});

이 코드의 출력 결과는 0:1, 1:2, 2:3, 3:4, 4:5, 5:6이다.
이 코드는 특별한 것이 없다.수조는 숫자 인덱스를 가지고 있기 때문에 우리는 0에서 뒤로 숫자를 꺼내서 N-1까지 가져간다. 그 중에서 N은 이 수조의 원소의 개수이다.
3. JSON 인스턴스
때때로 더 복잡한 데이터 구조를 만날 수 있다. 예를 들어 수조는 수조를 포함하고, 대상은 대상을 포함하며, 대상은 수조를 포함하거나, 수조는 대상을 포함한다.이런 상황에서 each() 방법은 어떻게 작용을 발휘합니까?

var json = [ 
 { 'red': '#f00' },
 { 'green': '#0f0' },
 { 'blue': '#00f' }
];

$.each(json, function () {
   $.each(this, function (name, value) {
      console.log(name + '=' + value);
   });
});

이 예의 출력 결과는 red=#f00,green=#0f0,blue=#00f이다.
우리는 이 플러그인 구조를 플러그인 () 방법으로 처리한다.외부 each () 호출은 변수 이름이 JSON인 그룹을 처리하는 데 사용되며, 내부 each () 호출은 그룹에 끼워 넣은 대상을 처리하는 데 사용됩니다.이 예에서 모든 대상은 하나의 속성만 있지만 일반적으로 여러 개의 속성이 있어도 된다.
4. 클래스 인스턴스
이 예는 다음 HTML 코드에서 모든class 속성이 제품Description인 요소를 옮겨다니는 방법을 보여 줍니다.

<div class="productDescription">Red</div>
<div>Pink</div>
<div class="productDescription">Orange</div>
<div class="generalDescription">Teal</div>
<div class="productDescription">Green</div>

선택기에서 each () 방법을 사용하는 대신 each () 보조 함수를 사용합니다.

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

이 예제의 출력 결과는 0:Red, 1:Orange, 2:Green입니다.
우리는 반드시 index와value를 가지고 갈 필요가 없다.이러한 매개변수는 현재 반복 처리 중인 DOM 요소를 판단하는 데 유용할 뿐입니다.그리고 이런 상황에서도 each 방법을 더욱 편리하게 사용할 수 있다.간략하게 이렇게 쓸 수 있다.

$('.productDescription').each(function () { 
  console.log($(this).text());
});

콘솔의 결과는 다음과 같습니다.

Red
Orange
Green

마찬가지로 새 jQuery 실례에 DOM 요소를 봉해야 합니다.text () 방법을 사용하여 요소의 텍스트를 출력합니다.
5. 인스턴스 지연
아래의 이 예에서 사용자가 ID가 5demo인 요소를 클릭하면 모든 목록 요소는 바로 주황색으로 변한다.그리고 요소는 index 값에 따라 지연 시간(0, 200, 400,...밀리초)을 설정합니다.

$('#5demo').bind('click', function (e) {
  $('li').each(function (index) {
$(this).css('background-color', 'orange')
  .delay(index * 200)
  .fadeOut(1500);
  });
  e.preventDefault();
});

결론
프로그래밍을 할 때 가능한 한 each () 함수를 많이 사용해야 한다. 이런 효율적인 방법은 우리에게 많은 시간을 절약할 수 있다.jQuery 외에도 ECMAScript 5 배열의 forEach () 방법을 사용할 수 있습니다.
주의: $.each()와 $(selector).each()는 서로 다른 방식으로 정의된 두 가지 다른 방법이다.