【jQuery】jQuery遍历一段具有相同结构里的元素

最新推荐文章于 2020-08-12 17:41:55 发布

爱吃香草冰淇淋的阿喵

最新推荐文章于 2020-08-12 17:41:55 发布

阅读量222

点赞数

分类专栏： javaweb 文章标签： jquery

本文链接：https://blog.csdn.net/coralime/article/details/106412973

版权

javaweb 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
</head>
<body>

<div class="weui-cells">

    <div class="weui-cell">
        <div class="weui-cell__bd">
            <p><span>标题文字1 </span><span>BORN TO LOVE</span></p>
        </div>
        <div class="weui-cell__ft">说明文字1</div>
    </div>

    <div class="weui-cell">
        <div class="weui-cell__bd">
            <p><span>标题文字2 </span><span>BORN TO LOVE</span></p>
        </div>
        <div class="weui-cell__ft">说明文字2</div>
    </div>

    <div class="weui-cell">
        <div class="weui-cell__bd">
            <p><span>标题文字3 </span><span>BORN TO LOVE</span></p>
        </div>
        <div class="weui-cell__ft">说明文字3</div>
    </div>

    <div class="weui-cell">
        <div class="weui-cell__bd">
            <p><span>标题文字4 </span><span>BORN TO LOVE</span></p>
        </div>
        <div class="weui-cell__ft">说明文字4</div>
    </div>
</div>

<script>
    $(document).ready(function(){
       $("div .weui-cell").each(function () {
           $(this).children().css("background-color","#FFCCCC");
           $(this).find(".weui-cell__bd").find("span").first().css("background-color","#CCFF11");
           $(this).find(".weui-cell__bd").find("span").next().css("background-color","#FFBB11");
           $(this).find(".weui-cell__ft").css("background-color","#CCFFEE");
       });
    });
</script>

</body>
</html>