引子：

最近遇到一個問題，就是在each()函式中怎麼模擬for迴圈中的break和continue的操作。所以就查看了jQuery關於這個函式的文件，並且總結一下。

演示程式碼如下：

<div>
        <ul>
            <li>你是第1個</li>
            <li>你是第2個</li>
            <li>你是第3個</li>
            <li>你是第4個</li>
            <li>
 
你是第5個</li>
        </ul>
    </div>

需要的結果就是遍歷整個li標籤元素，當迴圈到“你是第2個”的時候continue執行到“你是第4個”標籤的時候break;

1.$(selector).each()函式的使用

函式定義：

.each( function(index, Element) )

function(index, Element)
型別: Function()
為每個匹配元素執行的一個函式。

$(function() {
    $('li').each(function
 
(index) {
        var innerText = $(this).text();
        if (innerText == '你是第2個') {
            //跳過本次迴圈，相當於continue
            return;
        } else if (innerText == '你是第4個') {
            //退出迴圈,相當於break;
            return false;
        }
        console.log(innerText);
    });
})

執行結果：

在函式體內部我們使用$(this)

看下面我們將斷點打到函式的入口處，觀察$(this)和this的輸出：

2.$.each()函式的使用

$.each() 一個通用的迭代函式，它可以用來無縫迭代物件和陣列。陣列和類似陣列的物件通過一個長度屬性（如一個函式的引數物件）來迭代數字索引，從0到length - 1。其他物件通過其屬性名進行迭代。

函式定義：

jQuery.each(array, callback )或者jQuery.each(object, callback )
array
型別: Array
遍歷的陣列。
object
型別: Object
遍歷的物件。
callback
型別: Function( Integer indexInArray, Object value )
該函式會在每個物件上（迭代）呼叫。

執行程式碼：

$(function() {
        $.each($('li'), function(index, elem) {
            // console.log(index);
            // console.log(elem);
            var innerText =elem.innerText;
            if (innerText == '你是第3個') {
                return;
            } else if (innerText == '你是第5個') {
                return false;
            }
            console.log(innerText);

        })
    })

結果：

深入研究：
由上面的程式碼回撥函式function(index, elem) 我們知道，其中的當遍歷的是陣列的時候index和elem分別是索引和索引值。

那麼當我們遍歷的是一個物件的時候呢？

看示例：

var testObject={
        name:'zhiqiang',
        age:'23',
        home:'haidian'
    }

    $(function(){
        $.each(testObject,function(keyObj,valueObj){
            console.log(keyObj,valueObj);
        })
    })

可以看到輸出的結果是：

這裡我們可以知道當$.each()函式去遍歷一個物件的時候，這個時候回撥函式的argument[0],argument[1]分別是物件的key和value。