jQuery遍历li节点

最新推荐文章于 2022-09-29 11:37:37 发布

原创最新推荐文章于 2022-09-29 11:37:37 发布 · 8.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #遍历

前端同时被 2 个专栏收录

35 篇文章

订阅专栏

jQuery

9 篇文章

订阅专栏

本文详细探讨了如何使用jQuery高效地遍历DOM中的li节点，通过实例代码解析遍历过程，帮助开发者掌握这一常见操作。

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
         <script src="./jquery-2.2.4.min.js"></script>
         <script type="text/javascript">
            $(function(){
                // 获取button按钮并设置点击事件
                $("button").click(function(){
                    //获取所有的li并循环遍历
                     $("li").each(function(){
                    //将li节点的值乘以2                
                     $(this).html($(this).html()*2);
                    });
                });
            });
         </script>
    </head>
    <body>
         <h2 id="hid">jQuery实例:节点遍历</h2>
        <ul>
            <li>10</li>
            <li>4</li>
            <li>8</li>
            <li>6</li>
            <li>5</li>
        </ul>
        <button>乘以2</button>
    </body>
</html>

这里写图片描述