如何使用Jquery向每个匹配元素重复IF语句

时间:2012-05-21 20:46:49

标签: jquery if-statement each

我在页面上有许多具有相同ID的元素。这是两个:

<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>

每个元素包含所有国家/地区或仅包含一个国家/地区。示例中的这两个都有许多国家。我希望jquery检查每个长度是否超过100,如果它真的用一个单词替换所有国家 - WORLDWIDE。

这就是我使用的:

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

这仅用于更改第一个div,但它不会触及第二个div。我相信我没有很好地使用.each功能请让我知道可能出现的问题

6 个答案:

答案 0 :(得分:3)

问题是您的元素具有相同的id属性,而元素应该具有唯一的id s 。放置类而不是相等的id属性,例如

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

并使用此代码:

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

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

答案 1 :(得分:1)

ID是唯一标识符。如果您有一堆想要表现相似的元素,请使用class代替id

答案 2 :(得分:1)

您不能拥有任何ID的多个实例,这就是它被称为ID的原因。

你最好不要使用课程。

另外,请注意JQuery需要在每个语句的末尾使用分号。

<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>

答案 3 :(得分:1)

您不应该使用具有相同ID的多个元素。 如果在您的情况下是严格必要的,您可以使用:

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

答案 4 :(得分:1)

我会使用.text()方法。

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

此外,明显的ID必须是唯一的。如果你不能使你的id独特或使用类,那么这是一种低效的解决方法。

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

答案 5 :(得分:0)

首先,你不能重复ID,它违反了Web标准,浏览器无法告诉全世界你正在做什么,只需将它们改为课堂,它就会起作用:

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

每个元素包含所有国家/地区或仅包含一个国家/地区。示例中的这两个都有许多国家。我希望jquery检查每个长度是否超过100,如果它真的用一个单词替换所有国家 - WORLDWIDE。

这就是我使用的:

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

注意函数内的 $(this)