jQuery each()方法的用法

在操作 DOM 時，很多時候我們需要對“同一型別”的所有元素進行相同的操作。如果通過 JavaScript 來實現，我們往往都是先獲取元素的長度，然後使用迴圈方法來存取每一個元素，程式碼量比較大。在 jQuery 中，我們可以使用 each() 方法輕鬆實現元素的遍歷操作。

語法：

$().each(function(index, element){
……
})

each() 方法接收一個匿名函數作為引數，該函數有兩個引數：index、element。

index 是一個可選引數，它表示元素的索引號（即下標）。通過形參 index 以及配合 this 關鍵字，我們就可以輕鬆操作每一個元素。此外注意一點，形參 index 是從 0 開始的。
element 是一個可選引數，它表示當前元素，可以使用$(this)來代替。也就是說，$(element)等價於$(this)。

如果需要退出 each 迴圈，可以在回撥函數中返回 false，也就是 return false 即可。上面語法是固定形式，如果小夥伴們的 JavaScript 基礎實在太差，沒法理解，在實際開發中直接搬過去用就可以了。

舉例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            $("#btn").click(function () {
                $("li").each(function (index, element) {
                    var txt = "第" + (index + 1) + "個li元素";
                    $(element).text(txt);
                });
            });
        })
    </script>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <input id="btn" type="button" value="新增內容" />
</body>
</html>

預設情況下，預覽效果如圖 1 所示。

圖 1：預設效果