jquery显示迭代

最新推荐文章于 2022-10-19 08:00:00 发布

温柔女魔头

最新推荐文章于 2022-10-19 08:00:00 发布

阅读量513

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/qq_19880197/article/details/86736378

版权

jQuery 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

HTML

<div class="comment">
<ul>
    <li>我是第1个li</li>
    <li>我是第2个li</li>
    <li>我是第3个li</li>
    <li>我是第4个li</li>
    <li>我是第5个li</li>
    <li>我是第6个li</li>
    <li>我是第7个li</li>
    <li>我是第8个li</li>
    <li>我是第9个li</li>
    <li>我是第10个li</li>
</ul>
</div>

CSS

ul{
    list-style: none;
}
.comment{
    width: 650px;
    height: 240px;

}
li{
    float: left;
    width: 100px;
    height: 100px;
    border: 1px solid red;
    background-color: pink;
    margin: 10px;
    text-align: center;
    line-height: 100px;
}

jquery

<script src="jQuery/jquery-1.12.3.js"></script>
    <script>
        $(function () {

               // for(var i=0;i<$(".comment li").length;i++){
               //     $(".comment li").eq(i).css("opacity",(i+1)/10);
               // }
                $("li").each(function (index,element) {
                    $(element).css("opacity",(index+1)/10);
                })
        });
    </script>