【jQuery】jQuery遍歷一段具有相同結構裏的元素

<%@ 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>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章