Question

I am trying to do something that I believe is fairly simple. On page load I would like to count all of the children of a ul and then display that number as a string. Here is the code I have so far:

jQuery

$('ul').load(function() {
    var txt = "1" + "/" + $("> *", this).length;
    $(".counter").html( txt );
});

HTML

<ul>
    <li><img alt="Photo" src="images/photo.png" /></li>
    <li><img alt="Photo" src="images/photo.png" /></li>
    <li><img alt="Photo" src="images/photo.png" /></li>
</ul>

<p class="counter"></p>

So in this example, once the page loads, p.counter would contain the string “1/3”. Not sure what I am doing wrong here.

Answer 1

Why don’t you count the items on document ready?

$(document).ready( function() {
    var txt = "1"+ "/" + $("ul li").length;
    $(".counter").html( txt );
});

Example: http://jsfiddle.net/jtbowden/But8C/