이 기사에서는 jQuery.each () 함수의 깊이에 대해 논의합니다 - jQuery에서 가장 중요하고 일반적으로 사용되는 기능 중 하나입니다. 우리는 그 중요성을 탐구하고 사용하는 방법을 배울 것입니다.
코어 포인트
jQuery.each () 함수는 다중 요소 DOM 운영 및 데이터 처리를 효율적으로 수행하기 위해 DOM 요소, 어레이 및 객체를 반복하는 jQuery의 다기능 도구입니다.
이 기능은 jQuery 객체 (DOM 요소의 경우)를 호출하는 방법으로, 배열 및 객체에 대한 실질적인 기능으로서 각 모드 유형의 데이터 구조에 적합합니다.
는 두 번째 매개 변수 인 현재 값과 같습니다. 그러나 컨텍스트는 항상 객체이므로 원래 값을 포장해야합니다. 이것은 값과 컨텍스트 사이에 엄격한 평등이 없다는 것을 의미합니다.
기본 jquery.each () 함수 예
<div>
<how> jQuery.each () 함수가 jQuery 객체와 함께 어떻게 사용되는지 봅시다. 첫 번째 예제는 페이지의 모든 요소를 선택하고 속성을 출력합니다.
<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>// DOM 元素
$('div').each(function(index, value) {
console.log(`div${index}: ${this.id}`);
});</pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div>
<out> 두 번째 예제는 웹 페이지에서 각 외부 <p>를 출력합니다 (http (s) 프로토콜 만 가정) : <🎜 🎜>
</p>
<is> 페이지에 다음 링크가 있다고 가정합니다.
<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><code>div0:header
div1:main
div2:footer</code></pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div>
<will> 두 번째 예제는 출력됩니다 : <🎜 🎜><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>// DOM 元素
$('div').each(function(index, value) {
console.log(`div${index}: ${this.id}`);
});</pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div>
<that> jQuery 객체의 DOM 요소는 jQuery.ach ()로 전달되는 콜백 함수에서 "기본"형태라는 점에 유의해야합니다. 그 이유는 jQuery가 실제로 DOM 요소 배열의 래퍼 일뿐입니다. jQuery.each ()를 사용하면이 배열은 일반 배열과 같은 방식으로 반복됩니다. 따라서 우리는 포장의 요소를 상자 밖으로 꺼내지 않을 것입니다. <p>
<example> 두 번째 예에 대해서는 <🎜 🎜>를 작성하여 요소의 </p> 속성을 얻을 수 있음을 의미합니다. jQuery의 <🎜 <p> 메소드를 사용하려면 다음과 같은 요소를 다시 포장해야합니다. <code>this.href
href
<🎜 🎜> <<> jQuery.each () 배열 예 attr() <🎜 🎜>
$(this).attr('href')
<code>div0:header div1:main div2:footer</code>
<🎜 🎜> <<> jQuery.each () 클래스 예
<🎜 🎜>
// 数组
const arr = [
'one',
'two',
'three',
'four',
'five'
];
$.each(arr, function(index, value) {
console.log(value);
// 将在 "three" 后停止运行
return (value !== 'three');
});
// 输出：one two three
<(> 우리는 선택기의 각 () 메소드 대신 각 () 헬퍼 함수를 사용합니다.
이 경우 출력은 다음과 같습니다
<-r> 인덱스 관련 지연 (0, 200, 400 ... MS) 이후, 우리는 요소를 희미 해집니다.
// 对象
const obj = {
one: 1,
two: 2,
three: 3,
four: 4,
five: 5
};
$.each(obj, function(key, value) {
console.log(value);
});
// 输出：1 2 3 4 5<,>이 기사에서는 jQuery.each () 함수를 사용하여 DOM 요소, 어레이 및 객체를 반복하는 방법을 보여줍니다. 이것은 개발자가 자체 툴킷에 통합 해야하는 강력하고 시간 절약 기능입니다.
$.each({ one: 1, two: 2 } , function(key, value) {
console.log(this);
});
// Number { 1 }
// Number { 2 }Object.keys() 메소드를 사용하는 것을 고려할 수 있습니다. 클래스 배열 객체 또는 사전 개체의 키 가치 쌍을 반복 할 수있는 Foreach와 같은 라이브러리도 있습니다. Array.prototype.forEach()
기억하십시오 : 와 $.each()는 두 가지 다른 방식으로 정의 된 두 가지 방법입니다. $(selector).each()
jQuery에 대한 질문 각각 () 함수 에 대한 자주 묻는 질문
.Each ()와 함께 사용 된 콜백 함수의 매개 변수는 무엇입니까? 콜백 함수는 인덱스 (컬렉션의 요소의 현재 인덱스)와 요소 (현재 DOM 요소가 반복되는)의 두 매개 변수를 허용합니다.
위 내용은 5 jQuery.each () 함수 예제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
