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

Posted 2023-03-16

【中文标题】如何使用 Jquery 对每个匹配元素重复 IF 语句

【英文标题】：How to repeat IF statement to each matching element with Jquery

【发布时间】：2012-05-28 08:59:31

【问题描述】：

我在页面上有许多具有相同 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，如果它真的用一个单词替换所有国家 - 全球。

这是我用的：

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

这仅适用于更改第一个 div，但不会触及第二个。我相信我没有很好地使用 .each 函数请让我知道可能出了什么问题

【问题讨论】：

ID 应该是唯一的。您不能为多个元素拥有相同的 ID。

【参考方案1】：

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

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

并使用此代码：

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

演示： http://jsfiddle.net/aD7HQ/

【参考方案2】：

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

【参考方案3】：

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

【讨论】：

另外，请注意 JQuery 要求在每条语句的末尾使用分号。 - 从什么时候开始？

试图找到我第一次阅读它的资源。也许我错了。 JS 不需要，但我确信 JQ 需要。

jQuery 是一个 javascript 库，它不能强制执行任何新的语法规则。

【参考方案4】：

首先，您不能重复 ID，这违反了 Web 标准，并且浏览器无法分辨出您所引用的全球范围，只需将它们更改为 class 即可：

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

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

这是我用的：

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

注意函数内部的$(this)。

【参考方案5】：

您不应使用具有相同 ID 的多个元素。 如果在你的情况下是绝对必要的，你可以使用这个：

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

【参考方案6】：

我会使用.text() 方法。

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

另外，明显的 ID 必须是唯一的。如果您不能使您的 id 唯一或使用类来代替，这是一种低效的解决方法。

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