Question

I’m working on a blog theme that has a word count for each entry on the side of every post. I can get the word count to work, but it only works on the first entry, and then displays the same count for every post. I need to modify the script below to find the closest div.entrycontent and count the words in it, but for every entry. Below is my entry markup code, if anyone could help it’d be appreciated.

<div class="entry">
    <div class="entryinfo">
        <script type="text/javascript">
            var text = $('.entrycontent').text();
            var wordCount = text.split(' ').length;
            $("span.words").text(wordCount + ' words');
        </script>
        <span class="words"></span>
    </div>
    <div class="entrycontent">
        Lorem ipsum dolor amet...
    </div>
</div>

Answer 1

You need to loop through using .each().

Put this script once on the page, either at the bottom or at the top inside a $(document).ready(function(){...}); block:

$('.entry').each(function(i,el) {
    var $entry = $(this),
        text = $entry.find('.entrycontent').text(),
        wordCount = text.split(' ').length;
    $entry.find("span.words").text(wordCount + ' words');
    $entry.find("span.chars").text(charCount); // IDs must be unique, use classes instead
});

UPDATE

When $entry.find('.entrycontent').text() contains a lot of whitespace, it’s splitting on each of those space characters whether it separates a word or not. Try this:

$('.entry').each(function(i,el) {
    var $entry = $(this),
        text = $entry.find('.entrycontent').text(),
        wordCount = text.split(/\s+/).length;
    $entry.find("span.words").text(wordCount + ' words');
});

.split() docs

UPDATE 2

Well, if you want a true word count, I suppose that we should use .match() instead of .split():

$('.entry').each(function(i,el) {
    var $entry = $(this),
        text = $entry.find('.entrycontent').text(),
        marr = text.match(/\w+/g) || [],  // null if no matches
        wordCount = marr.length;
    $entry.find("span.words").text(wordCount + ' words');
});