Reputation: 161
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
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
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
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
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
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
Reputation: 145478
The problem is that you have elements with the same id
attributes, while elements should have unique id
s. 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