jQuery 순회 각각()

jQuery는 $() 메서드를 통해 지정된 요소 컬렉션을 찾은 후 일련의 작업을 수행할 수 있는 컬렉션 개체입니다. 예를 들어 $("li").css('') 모든 li에 대해 스타일 값을 설정합니다. jQuery는 컬렉션 개체이므로 CSS 메서드는 내부에 순회 메서드를 캡슐화해야 하며 이를 암시적 반복 프로세스라고 합니다. 컬렉션의 각 li에 대한 색상을 하나씩 설정하기 위해 여기서 메소드는 Each

입니다.each() 메소드는 for 루프 반복자로서 jQuery 객체 컬렉션의 각 DOM 요소를 반복합니다. 콜백 함수가 실행될 때마다 현재 루프 수는 매개변수로 전달됩니다(0부터 계산)

따라서 일반적으로 3가지 핵심 사항을 이해하세요.

각각은 for 루프의 래퍼 반복자입니다.
각각은 다음을 통해 처리됩니다. 2개의 고정된 실제 매개변수인 인덱스와 요소가 있습니다. 이는 각 콜백 메소드에서 현재 반복의 dom 요소를 가리킵니다. <li>php.cn</li> ;li>Aaron</li>
</ul>

li 반복을 시작하고 2번 반복합니다

$("li").each(function(index, element) {
인덱스 인덱스 0,1
요소 해당 li 노드 li,li
이것은 li
})

이렇게 하면 루프 본문에서 몇 가지 논리 연산을 수행할 수 있습니다. 일찍 종료해야 하는 경우 콜백 함수에서 루프를 반환하여 중단할 수 있습니다. false

코드를 작성해 봅시다:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
    .left {
        width: auto;
        height: 150px;
    }
    
    .left div {
        width: 150px;
        height: 120px;
        padding: 5px;
        margin: 5px;
        float: left;
        background: #bbffaa;
        border: 1px solid #ccc;
    }
    </style>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
    <h2>each方法</h2>
    <div class="left first-div">
        <div class="div">
            <ul>
                <li>list item 1</li>
                <li>list item 2</li>
                <li>list item 3</li>
            </ul>
        </div>
        <div class="div">
            <ul>
                <li>list item 4</li>
                <li>list item 5</li>
                <li>list item 6</li>
            </ul>
        </div>
    </div>

    <br/>
    <button>点击：each方法遍历元素</button>
    <button>点击：each方法回调判断</button>
    <script type="text/javascript">
    $("button:first").click(function() {
        //遍历所有的li
        //修改每个li内的字体颜色
        $("li").each(function(index, element) {
            $(this).css('color','red')
        })

    })
    </script>
    <script type="text/javascript">
    $("button:last").click(function() {
        //遍历所有的li
        //修改偶数li内的字体颜色
        $("li").each(function(index, element) {
            if (index % 2) {
                $(this).css('color','blue')
            }
        })
    })
    </script>
</body>

</html>

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <style> .left { width: auto; height: 150px; } .left div { width: 150px; height: 120px; padding: 5px; margin: 5px; float: left; background: #bbffaa; border: 1px solid #ccc; } </style> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> </head> <body> <h2>each方法</h2> <div class="left first-div"> <div class="div"> <ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> </ul> </div> <div class="div"> <ul> <li>list item 4</li> <li>list item 5</li> <li>list item 6</li> </ul> </div> </div> <br/> <button>点击：each方法遍历元素</button> <button>点击：each方法回调判断</button> <script type="text/javascript"> $("button:first").click(function() { //遍历所有的li //修改每个li内的字体颜色 $("li").each(function(index, element) { $(this).css('color','red') }) }) </script> <script type="text/javascript"> $("button:last").click(function() { //遍历所有的li //修改偶数li内的字体颜色 $("li").each(function(index, element) { if (index % 2) { $(this).css('color','blue') } }) }) </script> </body> </html>

제출하다 코드 재설정

자동운전