个人中心
gpt4 book ai didi

javascript - jQuery 检测何时添加列表项

转载 作者：行者123 更新时间：2023-12-03 06:16:06 25 4
gpt4 key购买 nike

我想用按钮将 li 附加到 ul 上。然后，当添加每个新列表项时，会显示列表项的数量。我可以添加 li，但不知道从哪里开始。

非常感谢任何指点。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>List counter</title>
</head>
<body>
    <ul class="myUL">
    </ul>
    <button class="myBUTTON">Add List Item</button>
    <p>List count>#</p>

    <script src="js/jquery-1.12.1.min.js"></script>
    <script>
        $('button.myBUTTON').on('click', function(eval) {
            eval.preventDefault();
        $('ul.myUL').append('<li>Item 1</li>');
        });
    </script>
</body>
</html>

最佳答案

您可以仅使用length来获取li计数并将其设置在click监听器中。

$('.myBUTTON').on('click', function() {
    // get the length before and directly increment by one to set it to the elements
    var length = ++$('.myUL li').length;

    $('.myUL').append('<li>Item ' + length  + '</li>');
    $('p').text('List count ' + length );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<ul class="myUL"></ul>
<button class="myBUTTON">Add List Item</button>
<p>List count 0</p>

关于javascript - jQuery 检测何时添加列表项，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39099044/

25 4 0
文章推荐： javascript - 如何在旧 IDEA 12 中使用 PhoneGap/Cordova 插件？
文章推荐： java - 为什么Gradle在本地m2存储库中看不到该Maven坐标？
文章推荐： android - 根据区域获取YouTube趋势( HitTest 门) channel 和播放列表
文章推荐： javascript - 无法使引用 header 正常工作
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com