CODEWITHSUNDEEP
jqueryif-statementeach
Mantas
Mantas

Reputation: 161

How to repeat IF statement to each matching element with Jquery

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

Upvotes: 1

Views: 2878

Answers (6)

Kevin B
Kevin B

Reputation: 95054

I would use the .text() method.

$(".worldwide").text(function(i,text){
    return text.length > 100 ? 'WORLDWIDE' : text;
});

Also, the obvious ID's must be unique. If you can't make your id's unique or use a class instead, here's an inefficient workaround.

$("[id=worldwide]").text(...

Upvotes: 1

Yefb
Yefb

Reputation: 146

You should not use several elements with the same ID. If in your case is strictly necesary, you can use this:

$('span').each(function(index,element){
    if(element.id == 'worldwide'){
        //Do Something
    }
});

Upvotes: 1

Skatox
Skatox

Reputation: 4284

First, you can't repeat IDs, it goes against Web standards and browser cannot tell wich worldwide you're reffering to, just change them to class and it will work:

<span class="worldwide">...</span>
<span class="worldwide">...</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 ($(this).text().length > 100) { $(this).text('WORLDWIDE')}
    })
</script>

Notice $(this) inside the function.

Upvotes: 0

nealio82
nealio82

Reputation: 2633

You can't have more than one instance of any ID, that's why it's called an ID.

You'd be better off using classes instead.

Also, be aware that JQuery requires the use of a semi-colon at the end of each statement.

<span class="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 class="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>


<script>

$(".worldwide").each(function() {


if ($(this).text().length > 100) { $(this).text('WORLDWIDE'); }

});
</script>

Upvotes: 1

jeffjenx
jeffjenx

Reputation: 17487

ID's are meant to be unique identifiers. If you have a bunch of elements that you want to behave similarly, use class instead of id.

Upvotes: 1

VisioN
VisioN

Reputation: 145478

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/

Upvotes: 3

Related Questions