jQuery トラバーサル each()

jQuery はコレクションオブジェクトです。$() メソッドを通じて指定された要素のコレクションを見つけた後、一連の操作を実行できます。たとえば、$("li").css('') を操作します。すべての li にスタイル値を設定します。 jQuery はコレクションオブジェクトであるため、css メソッドは内部にトラバーサルメソッドをカプセル化する必要があります。これは、暗黙的な反復プロセスと呼ばれます。コレクション内の各 li の色を 1 つずつ設定するには、ここでのメソッドは each

です。each() メソッドは、jQuery オブジェクトコレクション内の各 DOM 要素を反復する for ループ反復子です。コールバック関数が実行されるたびに、現在のループ数がパラメーターとして渡されます (0 から数えます)

それでは、次の 3 つの重要なポイントを一般的に理解してください:

それぞれは for ループのラッパー反復子です
それぞれは次のように処理されますコールバックとウィルの 2 つの固定実パラメータがあります。各コールバックメソッドには、現在の反復の dom 要素が指定されています。
< ;li>Aaron</li>
</ul>

liの反復を開始して2回ループします

$("li").each(function(index, element) {
インデックスindex 0,1
要素は対応する li ノード li,li
これは li

を指します})

このようにして、ループ本体でいくつかの論理演算を行うことができ、早期に終了する必要がある場合は、コールバック関数で return することでループを中止できます。 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>

提出するリセットコード

自動運転