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>

效果图：