Question

I have a number of elements on the page with the same ID. Here’s two:

<span id="worldwide">United Kingdom Australia United States Lithuania Russia Spain France Portugal Italy United Kingdom Australia United States Lithuania Russia Spain France Portugal Italy United Kingdom Australia United States Lithuania Russia Spain France Portugal Italy United Kingdom Australia United States Lithuania Russia Spain France Portugal Italy United Kingdom Australia United States Lithuania Russia Spain France Portugal Italy United Kingdom Australia United States Lithuania Russia Spain France Portugal Italy United Kingdom Australia United States Lithuania Russia Spain France Portugal Italy United Kingdom Australia United States Lithuania Russia Spain France Portugal Italy United Kingdom Australia United States Lithuania Russia Spain France Portugal Italy</span>

<span id="worldwide">United Kingdom Australia United States Lithuania Russia Spain France Portugal Italy United Kingdom Australia United States Lithuania Russia Spain France Portugal Italy United Kingdom Australia United States Lithuania Russia Spain France Portugal Italy United Kingdom Australia United States Lithuania Russia Spain France Portugal Italy United Kingdom Australia United States Lithuania Russia Spain France Portugal Italy United Kingdom Australia United States Lithuania Russia Spain France Portugal Italy United Kingdom Australia United States Lithuania Russia Spain France Portugal Italy United Kingdom Australia United States Lithuania Russia Spain France Portugal Italy United Kingdom Australia United States Lithuania Russia Spain France Portugal Italy</span>

Each element either contains all countries or just one country. These two in the example are both with many countries. I want jquery to check each if the length is more than 100 and if its true replace all countries with just one word – WORLDWIDE.

This is what I use:

<script>
    $("#worldwide").each(function () {
        if ($("#worldwide").text().length > 100) {
            $("#worldwide").text('WORLDWIDE')
        }
    })
</script>

This only works to change the first div but it doesn’t touch the second. I believe I’m not using the .each function well Please let me know what could be wrong

Answer 1

The problem is that you have elements with the same id attributes, while elements should have unique ids. Put classes instead of equal id attributes, e.g.

<span class="worldwide">...</span>

And use this code:

$(".worldwide").each(function() {
    if ($(this).text().length > 100) {
        $(this).text('WORLDWIDE');
    }
});

DEMO: http://jsfiddle.net/aD7HQ/