5 jQuery.each () 함수 예제
- William Shakespeare원래의
- 2025-02-08 11:06:17588검색
이 기사에서는 jQuery.each () 함수의 깊이에 대해 논의합니다 - jQuery에서 가장 중요하고 일반적으로 사용되는 기능 중 하나입니다. 우리는 그 중요성을 탐구하고 사용하는 방법을 배울 것입니다.
코어 포인트
jQuery.each () 함수는 다중 요소 DOM 운영 및 데이터 처리를 효율적으로 수행하기 위해 DOM 요소, 어레이 및 객체를 반복하는 jQuery의 다기능 도구입니다.
이 기능은 jQuery 객체 (DOM 요소의 경우)를 호출하는 방법으로, 배열 및 객체에 대한 실질적인 기능으로서 각 모드 유형의 데이터 구조에 적합합니다.- jQuery.each () 란 무엇입니까? jQuery의 각 () 함수는 하나 이상의 DOM 요소를 포함하는 대상 jQuery 객체의 각 요소를 통해 루프하는 데 사용됩니다. 다중 요소 DOM 운영 및 임의의 배열 및 객체 속성을 반복하는 데 매우 유용합니다.
-
이 기능 외에도 jQuery는 DOM 요소를 사전 선택하거나 생성하지 않고 호출 할 수있는 동일한 이름의 도우미 기능을 제공합니다.
jQuery.each () 구문
는 두 번째 매개 변수 인 현재 값과 같습니다. 그러나 컨텍스트는 항상 객체이므로 원래 값을 포장해야합니다. 이것은 값과 컨텍스트 사이에 엄격한 평등이 없다는 것을 의미합니다.
기본 jquery.each () 함수 예
jQuery.each () 클래스 예
우리는 선택기의 각 () 메소드 대신 각 () 헬퍼 함수를 사용합니다.
이 경우 출력은 다음과 같습니다
와
jQuery에 대한 질문 각각 () 함수 에 대한 자주 묻는 질문
.Each ()와 함께 사용 된 콜백 함수의 매개 변수는 무엇입니까? 콜백 함수는 인덱스 (컬렉션의 요소의 현재 인덱스)와 요소 (현재 DOM 요소가 반복되는)의 두 매개 변수를 허용합니다.
<div>
<how> jQuery.each () 함수가 jQuery 객체와 함께 어떻게 사용되는지 봅시다. 첫 번째 예제는 페이지의 모든 요소를 선택하고 속성을 출력합니다.
<pre class="brush:php;toolbar:false"><code class="language-javascript">// DOM 元素
$('div').each(function(index, value) {
console.log(`div${index}: ${this.id}`);
});</code></pre>
<out> 두 번째 예제는 웹 페이지에서 각 외부 <p>를 출력합니다 (http (s) 프로토콜 만 가정) :
</p>
<is> 페이지에 다음 링크가 있다고 가정합니다.
<pre class="brush:php;toolbar:false"><code>div0:header
div1:main
div2:footer</code></pre>
<will> 두 번째 예제는 출력됩니다 : <pre class="brush:php;toolbar:false"><code class="language-javascript">// DOM 元素
$('div').each(function(index, value) {
console.log(`div${index}: ${this.id}`);
});</code></pre>
<that> jQuery 객체의 DOM 요소는 jQuery.ach ()로 전달되는 콜백 함수에서 "기본"형태라는 점에 유의해야합니다. 그 이유는 jQuery가 실제로 DOM 요소 배열의 래퍼 일뿐입니다. jQuery.each ()를 사용하면이 배열은 일반 배열과 같은 방식으로 반복됩니다. 따라서 우리는 포장의 요소를 상자 밖으로 꺼내지 않을 것입니다. <p>
<example> 두 번째 예에 대해서는 를 작성하여 요소의 </example></p> 속성을 얻을 수 있음을 의미합니다. jQuery의 메소드를 사용하려면 다음과 같은 요소를 다시 포장해야합니다. <code>this.href
href
jQuery.each () 배열 예 attr()
$(this).attr('href')
<.> 여기 특별한 것은 없습니다. 배열에는 숫자 인덱스가 있으므로 0에서
<code>div0:header
div1:main
div2:footer</code>
<code class="language-javascript">// 数组
const arr = [
'one',
'two',
'three',
'four',
'five'
];
$.each(arr, function(index, value) {
console.log(value);
// 将在 "three" 后停止运行
return (value !== 'three');
});
// 输出：one two three</code>
<code class="language-javascript">// 对象
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</code>
결론 <code class="language-javascript">$.each({ one: 1, two: 2 } , function(key, value) {
console.log(this);
});
// Number { 1 }
// Number { 2 }</code>
Object.keys() 메소드를 사용하는 것을 고려할 수 있습니다. 클래스 배열 객체 또는 사전 개체의 키 가치 쌍을 반복 할 수있는 Foreach와 같은 라이브러리도 있습니다. Array.prototype.forEach()
기억하십시오 : $.each()는 두 가지 다른 방식으로 정의 된 두 가지 방법입니다. $(selector).each()
위 내용은 5 jQuery.each () 함수 예제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!