Question

Here I have html structure. It repeats several times on the page.

<article class="boo">
    <h4>Here goes the title</h4>
</arcticle>

I want to count the number of characters in each header h4 inside of article.

$('article.boo h4').text().length > 70

Counts the total number of characters in all headers. What I want is to check if each and every of the headers is longer than 70 characters.

What is the best way to loop through all the elements and make a validation in this case?

Thank you

Answer 1

You could use jQuery’s each() method, i.e:

$('article.boo h4').each(function() {
    if ($(this).text().length > 70) {
       //do stuff if longer than 70 chars
    }
});

Or, depending on your definition of ‘best’, you could use a standard JavaScript for loop:

for (var x = 0, y = $('article.boo h4').length - 1; x < y; x++) }
    if ($('article.boo h4')[x].text().length > 70) {
        //do stuff if longer than 70 chars
    }
}

If your definition of best means ‘easiest’ the first option may be the way to go, if by best you mean ‘most performant’ use the second, although if necessary that could be improved with selector caching so as not to select an element on each loop iteration