<jQuery> <方法> 十九. each()方法(遍历方法) 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul>li {
            width: 100px;
            height: 100px;
            background-color: pink;
            display: block;
            margin-top: 10px;
        }
    </style>
</head>
<body>
<ul>
    <li>01</li>
    <li>02</li>
    <li>03</li>
    <li>04</li>
    <li>05</li>
    <li>06</li>
    <li>07</li>
    <li>08</li>
    <li>09</li>
    <li>10</li>
</ul>
<script src="jquery-3.2.1.js"></script>
<script>
    $(function () {
        // 遍历方法1
        // for (var index = 0; index < $("ul>li").length; index++) {
        //     $("ul>li").eq(index).css("opacity", (index+1)/10);
        // }

        // 遍历方法2
        $("ul>li").each(function (index, element) {
           $("ul>li").eq(index).css("opacity", (index+1)/10);
        });
    });
</script>
</body>
</html>

 

posted @ 2018-01-13 11:16  云淡风轻我爱编程  阅读(121)  评论(0)    收藏  举报