jQuery 遍历each()的使用方法

.each()是一个for循环的包装迭代器
.each()通过回调的方式处理，并且会有2个固定的实参，索引与元素(从0开始计数)
.each()回调方法中的this指向当前迭代的dom元素

遍历方法：

<div class="left first-div">
    <div class="div">
        <ul>
            <li>111111111111</li>
            <li>22222222222</li>
            <li>3333333333</li>
        </ul>
    </div>
    <div class="div">
        <ul>
            <li>4444444444</li>
            <li>555555555</li>
            <li>666666666</li>
        </ul>
    </div>
</div>

<br/>
<button class="click">遍历元素</button>

<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 type="text/javascript">
    $(".click").click(function() {
        $("li").each(function(index, element) { //遍历所有的li
            $(this).css('color','red') //修改每个li内的字体颜色
        })
    })
</script>

效果图：

 

回调函数方法：

div和样式跟之前遍历的一样

<button class="click">回调判断</button>

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

效果图：