jQuery检测何时添加列表项

时间:2016-08-23 10:46:28

标签: javascript jquery html-lists counter

我想用一个按钮将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>

1 个答案:

答案 0 :(得分:1)

您可以使用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>