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>

效果圖：