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时更新函数以完全执行其他操作，在这种情况下，等待500ms然后.click on .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上运行该功能，这似乎“有点”工作，它会点击我选择的任何内容，但它不会更新。长度参数，所以我改变了它。所以.centter点击更新。更新（因为它在点击#refreshme时拒绝更新），传递了setTimeout并且工作正常。非常hacky。

只需更新答案，以便遇到其他任何人都可以使用。

$(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()。

Answer 2

你需要计算长度，点击这样的刷新，

$(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 
        n = $(".left-5 li").length; // count number of li's
        $(".spandex").text("There are " + n + " li's.");
    });
});

Answer 3

正如其他人提到的，您需要根据需要重新计算n。但是你也应该结合重复的代码使其更简单：

function showCount() {
    var n = $(".left-5 li").length;
    $(".spandex").text("There are " + n + " li's.");
}

$(document).ready(function () {
    showCount();
    $("#refreshme").click( showCount );
});

计算和更新列表项的数量

3 个答案: