練習-jq的遍歷

奮鬥中的切圖猿發表於2020-10-05

要求：
滑鼠移動到任意li元素上時獲取該元素的內容(即在控制檯輸出)
點選頁面的時候將元素的內容依次加1000

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
        <li>555</li>
    </ul>
    <script src="jquery-1.10.1.min.js"></script>
    <script>
        // 滑鼠移動到任意li元素上時獲取該元素的內容(即在控制檯輸出)
        // 點選頁面的時候將元素的內容依次加1000
        // $("li").eq(i)
        // console.log($("li").length);
        // JQ物件.index()
        $("li").mouseover(function (){
            console.log($(this).html());
        })
        $(document).click(function (){
            for(var i=0;i<$("li").length;i++){
                $("li").eq(i).html($("li").eq(i).html()-0+1000);   //在jq中eq相當於第i項
                // $("li").eq(i).html()獲取的是字串，所以要轉換成數字
            }
        })

        // 下面的這種寫法是錯的，因為在jq中獲取值的時候獲取的是第一個元素的內容，其它元素得到的內容也是第一個，所以都變成了111，在111的基礎上加1000
        // $(document).click(function(){
        //     $("li").html($("li").html()-0+1000);
        // })
    </script>
</body>
</html>

相關文章