如何使用 jQuery 计算动态添加到页面的列表项数

How to count the number of list items that are dynamically added to a page using jQuery?

本文关键字：列表 jQuery 何使用 计算 动态 添加      更新时间：2023-09-26

我正在尝试计算页面上使用jQuery动态添加的列表项的数量。当它们已经在页面上时，我知道如何计算它们。但是，动态添加列表项时如何执行此操作？

.HTML：

<ul>
  <li class="working">Lorem 1</li>
  <li class="working">Lorem 2</li>
  <li class="working">Lorem 3</li>
  <li class="working">Lorem 4</li>
  <li class="working">Lorem 5</li>
</ul>

j查询：

$(document).ready(function(){
    if($('li.working').length > 2) {
        alert('More than 2');
    }
});

下面是一个计算列表项静态数量的小提琴。有人可以帮我计算在页面上动态添加列表项的数量吗？

使用以下 HTML ：

<button>Click to add li</button>
<p>No. of list items : <span></span></p>
<ul></ul>

下面是动态添加列表项并显示列表项计数值的 jquery 代码：

$(document).ready(function(){
  var c=1;
  $('button').click(function(){
    $('ul').append("<li class='working'>Lorem "+c+"</li>");
    c++;
    $('p span').text($('li.working').length);
  });
});

因此，您想知道通过jquery动态添加列表后的长度。您可以只计算成功附加列表后的长度。我创建了一个带有按钮的虚拟附加（您可以随心所欲地进行）。
.HTML： 

<ul>
  <li class="working">Lorem 1</li>
  <li class="working">Lorem 2</li>
  <li class="working">Lorem 3</li>
  <li class="working">Lorem 4</li>
  <li class="working">Lorem 5</li>
</ul>
<input type="button" id="add" value="Add" />

.JS：

$(document).ready(function(){

  $( "#add" ).on( "click", function() {
    var size = $('ul').find('li').length;
    $('ul').append('<li class="working">Lorem '+(size+1)+'</li>');
    //replica of the ajax dynamic addition. Just check for the length after successful append in you UI
    $( "ul" ).promise().done(function() {
   if($('li.working').length > 2) {
    alert($('li.working').length);
  }
  });
    });
});

这是小提琴：https://jsfiddle.net/rumba_alex47/1mmokwvf/

请在此处找到演示。

.HTML： 

<ul>
    <li class="working">Lorem 1</li>
    <li class="working">Lorem 2</li>
    <li class="working">Lorem 3</li>
    <li class="working">Lorem 4</li>
    <li class="working">Lorem 5</li>
</ul>
<button onclick="add()">
    ADD
</button>

.JS：

function add() {
    $('ul').append('<li class="working">Lorem ' + ($('ul li.working').length + 1) + '</li>');
}
相关文章：