2

What I'm trying to achieve is counting the number of list items using .length, I can get this working on document ready, but I can't get the number to dynamically update.

I have a button that adds li's to a list when it's clicked (favourites), what I'd like to do is get the number of li's updating when that happens, here's the code;

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

Perhaps it's this structure that's the problem? I've tried calling the function on the click of .addfav instead, still no dice.

I tried updating the function to do something else completely when #refreshme is clicked, in this case, wait 500ms then .click on .latest, it doesn't work.

$(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.");
        */

    });
});

I tried running the function on click of wpfp-link instead of #refreshme and .add fav, this seemed to work 'somewhat', it'd fire a click on whatever I chose, but it wouldn't update the .length parameter, so I changed it so .length updated on the click of .center (since it refused to update when #refreshme was clicked), passed a setTimeout and that worked. Very hacky.

Just updating the answer so anyone else that comes across it has something to work with.

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





    });
});
2
  • 1
    Well, you have to select and count the elements again. n won't change by itself. Jun 16, 2013 at 9:48
  • I can't see any of the elements used in your jQuery selectors in your posted HTML. Jun 16, 2013 at 10:09

3 Answers 3

3

If you're using a browser which supports getElementsByClassName(), and you're willing to add a class-name to the li elements, you could simply use:

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

Simple, proof-of-concept, demo.

This takes advantage of the fact that document.getElementsByClassName() returns a live nodeList (so it's added to as more elements matching the given class-name are added to the document).

You could, of course, narrow the scope by coupling the above with document.getElementById():

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

Simple, proof-of-concept, demo.

References:

2

You need to count length , on click of refresh like this,

$(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.");
    });
});
4
  • Hmm, this is really strange, this works if I set it update when .center (my main body div) is clicked, but not #refreshme, and I can't figure out why. Is there any reason why the function wouldn't run?
    – andy
    Jun 16, 2013 at 9:56
  • @andy can't say anything without looking at your html, it would be helpful if you can create a fiddle jsfiddle.net Jun 16, 2013 at 9:58
  • I would create a fiddle, but it's a local wordpress install at the moment.
    – andy
    Jun 16, 2013 at 10:06
  • Well, I'm stumped, it'll update the number if I set it to be on.click of a random element, but not on click of #refreshme. Perhaps because there's an a tag inside that? Albeit one calling an ajax function.
    – andy
    Jun 16, 2013 at 10:18
0

As others mentioned, you need to recalculate n as needed. But you should also combine the duplicate code to make it simpler:

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

$(document).ready(function () {
    showCount();
    $("#refreshme").click( showCount );
});
2
  • I'd suggest that, if you're abstracting to a function (which is a good idea if this has to be done repetitively), you might want to pass in the relevant selectors (the elements to count, and where to show the result). Jun 16, 2013 at 10:08
  • I definitely agree in general, in fact you would probably also want to be able to pass the message to be displayed as a parameter. But in this case you would be passing in all those parameters in two different places, pretty much defeating the purpose of combining the code. Of course you could have a more general function that takes those parameters, and then a specialized function that doesn't take any parameters but calls the more general one, and then use the specialized function in the ready and click calls. If there were more code involved that would certainly be worthwhile. Jun 16, 2013 at 10:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.