jquery - 计算和更新列表项的数量

Question

我想要实现的是使用 .length 计算列表项的数量，我可以在文档上准备好这项工作，但我无法动态更新该数量。

我有一个按钮，单击时会将 li 添加到列表(收藏夹)，我想做的是在发生这种情况时获取更新 li 的数量，这是代码；

$(document).ready(function () {

  var n = $(".left-5 li").length; // count number of li's
  $(".spandex").text("There are " + n + " li's."); //output number in .spandex

     //this is the part I can't get to work
    $("#refreshme").click(function () { //when refreshme is clicked update number of li's in .spandex 
   $(".spandex").text("There are " + n + " li's.");
  });


});

<div id="refreshme">
    <div id="favbutton-2" class="widget FavButton"> 
        <div class="btn btn-mini">

            <span class='wpfp-span'>
                <a class='wpfp-link' href='?wpfpaction=add&amp;postid=724' title='' rel='nofollow'>
                    <span class="addfav"></span>

                </a>
            </span> 
        </div>

    </div>              
</div>

也许问题出在这个结构上？我尝试通过单击 .addfav 来调用该函数，但仍然没有骰子。

我尝试更新函数以在单击 #refreshme 时完全执行其他操作，在本例中，等待 500 毫秒然后单击 .latest，它不起作用。

$(document).ready(function () {

    var n = $(".left-5 li").length; // count number of li's
    $(".spandex").text("There are " + n + " li's."); //output number in .spandex


    $("#refreshme").click(function () { 

      setTimeout(function () {
            $('.latest').click();
        }, 500); 

        /*
        n = $(".left-5 li").length;
        $(".spandex").text("There are " + n + " li's.");
        */

    });
});

我尝试在单击 wpfp-link 而不是 #refreshme 和 .add fav 时运行该函数，这似乎“有点”工作，它会触发我选择的任何内容的单击，但不会更新 . length 参数，所以我更改了它，以便 .length 在单击 .center 时更新(因为单击 #refreshme 时它拒绝更新)，传递了 setTimeout 并且有效。非常老套。

只是更新答案，以便其他遇到该问题的人可以找到一些可以使用的东西。

$(document).ready(function () {

    var n = $(".left-5 li").length; // count number of li's
    $(".spandex").text("There are " + n + " li's."); //output number in .spandex


    $(".wpfp-link, .addfav, .removefav").click(function () { 

      setTimeout(function () {
            $('.center').click();
             n = $(".left-5 li").length;
             $(".spandex").text("There are " + n + " li's.");
        }, 500); 





    });
});

Answer 1

如果您使用的浏览器支持 getElementsByClassName()，并且您愿意向 li 添加类名> 元素，您可以简单地使用:

var listItems = document.getElementsByClassName('listItem');
$('#refreshme').click(function(){
    $('.spandex').text('There are ' + listItems.length);
});

Simple, proof-of-concept, demo .

这利用了 document.getElementsByClassName() 返回一个事件的 nodeList 的事实(因此，当更多与给定类名匹配的元素添加到文档中时，它就会被添加到其中)。

当然，您可以通过将上述内容与 document.getElementById() 结合起来缩小范围:

var listItems = document.getElementById('one').getElementsByClassName('listItem');
$('#refreshme').click(function(){
    $('.spandex').text('There are ' + listItems.length);
});

Simple, proof-of-concept, demo .

引用文献:

• getElementsByClassName() .