Question

我正在尝试计算页面上使用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>

jQuery的：

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

这是一个Fiddle，它计算列表项的静态数量。有人可以帮助我在页面上动态添加列表项目的数量吗？

Answer 1

使用以下HTML：

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

以下是动态添加列表项的jquery代码，并显示list-items计数值：

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

Answer 2

因此，您希望通过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);
  }
  });
    });

});

以下是FIDDLE：https://jsfiddle.net/rumba_alex47/1mmokwvf/

Answer 3

请找到demo here。

<强> 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>');
}

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

3 个答案: