> 웹 프론트엔드 > JS 튜토리얼 > jQuery.each() 함수 사용법에 대한 자세한 설명

jQuery.each() 함수 사용법에 대한 자세한 설명

巴扎黑
풀어 주다: 2017-07-09 11:25:38
원래의
989명이 탐색했습니다.

each() 함수는 현재 jQuery 개체와 일치하는 각 요소를 컨텍스트로 사용하여 지정된 함수를 탐색하고 실행하는 데 사용됩니다.

컨텍스트라는 것은 함수 내부의 this 포인터 가 해당 요소를 참조한다는 의미입니다.

이 함수는 jQuery 객체(인스턴스)에 속합니다. 이는 전역 jQuery 객체의 Each() 함수와 다르다는 점에 유의하세요.

Syntax

jQueryObject.each(callback)

Parameters

Parameters

Description

callback 루프 실행을 위해 함수 유형으로 지정되는 함수입니다.

each() 함수는 일치하는 각 요소를 기반으로 함수 콜백을 반복하고 호출합니다. 함수 콜백이 호출될 때마다 Each() 함수는 콜백 함수 내부의 this 참조를 현재 반복 중인 요소를 가리키고 두 개의 매개변수를 전달합니다. 첫 번째 매개변수는 일치하는 요소에서 현재 반복되는 요소의 index 값(0부터 계산)이고, 두 번째 매개변수는 현재 반복되는 요소(이와 동일한 참조)입니다.

each() 함수는 각 함수 콜백 호출의 반환 값을 기반으로 후속 작업도 결정합니다. 반환 값이 false이면 루프가 중지됩니다(일반 루프의 중단과 동일). 다른 값이 반환되면 다음 루프를 계속 실행한다는 의미입니다.

반환 값

each() 메서드의 반환 값은 jQuery 유형으로, 현재 jQuery 개체 자체를 반환합니다.

예제 및 설명

다음 HTML 코드를 예로 들어 보겠습니다.

<div id="n1">
    <div id="n2">
        <ul id="n3">
            <li id="n4">item1</li>
            <li id="n5">item2</li>
            <li id="n6">item3</li>
        </ul>
    </div>  
</div>
<form id="demoForm">
    <input name="goods_weight" type="checkbox" value="20">A(20kg)<br>
    <input name="goods_weight" type="checkbox" value="33">B(33kg)<br>
    <input name="goods_weight" type="checkbox" value="36">C(36kg)<br>
    <input name="goods_weight" type="checkbox" value="49">D(49kg)<br>
    <input name="goods_weight" type="checkbox" value="56">E(56kg)<br>
    <input name="goods_weight" type="checkbox" value="78">F(78kg)<br>
    <input id="btnBuy" type="button" value="订购">    
</form>
로그인 후 복사

이제 모든

  • 요소의 innerHTML을 "숫자 n"(n은 1, 2, 3...)으로 변경합니다.

    $("ul li").each(function(index, element){
        // this === element
        $(element).html( "编号" + (index + 1) );  
    });
    로그인 후 복사

    다음으로, 상품 주문을 처리하는 데 사용되는 [주문] 버튼의 클릭이벤트를 등록합니다. 주문한 상품의 무게가 100kg을 초과하지 않을 경우 주문이 불가능합니다. 해당 정보가 표시됩니다.

    아아아아

    위 내용은 jQuery.each() 함수 사용법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

  • 관련 라벨:
    원천:php.cn
    본 웹사이트의 성명
    본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
    인기 튜토리얼
    더>
    최신 다운로드
    더>
    웹 효과
    웹사이트 소스 코드
    웹사이트 자료
    프론트엔드 템플릿