jQuery - 检查标签的内容是不是等于 sometext 然后做一些事情

Posted 2023-05-09

【中文标题】jQuery - 检查标签的内容是不是等于 sometext 然后做一些事情

【英文标题】：jQuery - Check if the tag's content is equal to sometext then do somethingjQuery - 检查标签的内容是否等于 sometext 然后做一些事情

【发布时间】：2012-01-26 02:29:36

【问题描述】：

假设我的内容中有很多这样的内容 div : <cite class="fn">blabla</cite>

如何检查每个 cite 标签的 content（在本例中为：blabla）与 fn 类，看看它是否等于“sometext”，然后将其颜色更改为红色？

很简单。

【参考方案1】：

$('cite.fn:contains(blabla)').css('color', 'red');

编辑：虽然它也会匹配“blablablabla”。

$('cite.fn').each(function () 
    if ($(this).text() == 'blabla') 
        $(this).css('color', 'red');
    
);

应该更准确。

编辑：实际上，我认为 bazmegakapa 的解决方案更优雅：

$('cite.fn').filter(function () 
    return $(this).text() == 'blabla';
).css('color', 'red');;

【讨论】：

还匹配<cite class="fn">textblabla</cite>，如果搜索词很容易成为子字符串，这可能会导致问题。

【参考方案2】：

您可以使用神奇的.filter() 方法。它可以将一个函数作为其参数，这会将 jQuery 集合的元素减少为那些通过其测试的元素（函数返回 true）。之后，您可以轻松地在其余元素上运行命令：

var searchText = 'blabla';

$('cite.fn').filter(function () 
    return $(this).text() === searchText;
).css('color', 'red');

jsFiddle Demo

【讨论】：

关于jQuery性能，更好的预选器更好？示例：$("cite.fn:contains('"+searchText+"')").filter(function()return $(this).text().length==searchText.length);

@PeterKrauss 我不会说它更好。 :contains() 不是标准选择器，因此 jQuery 必须使用自己的引擎，而不是更快的原生引擎（它通常使用）。因此，一方面你赢了，另一方面你就输了。你可以做一个 jsPerf 基准测试并在这里发布结果。

好，the test is there（你可以检查链接并纠正测试如果错误）。预选策略不好，你原来的代码比较快。

@PeterKrauss 不错的测试。基本上这就是为什么你不应该在大多数时候使用非标准的jQuery selectors。如果原生 querySelectorAll() 支持选择器，那就快多了。

【参考方案3】：

您可能会执行以下操作：

$('cite.fn').each(function() 
  var el = $(this);
  if (el.text() === 'sometext') 
     el.css( 'color' : 'red' );
  
);

这会针对每个具有 fn 类的 cite 触发一个函数。该函数检查当前cite 的值是否等于'sometext'。

如果是，那么我们将 CSS color (text-color) 属性更改为 red。

注意我在此示例中使用 jQuery，因为您已专门标记您的问题 jQuery。忽略不赞成票，这是在我编辑我犯的错字之前应用的（el.val() 而不是el.text()）

【讨论】：

@kolink 所以你把它改成 .html() 或 .text() 就可以了。顺便说一句，让人们变得愚蠢的不是 jQuery，而是整个互联网。

@Kolink 你对第一部分是正确的。对于第二部分......您仍然可以编辑您的评论。 jQuery 不会让任何人变得愚蠢。

@Kolink 使用原生 javascript 会让你自大吗？

如果没有它，我看到的每个使用 jQuery 制作的网站都可以更快、更高效地工作一百倍 [耸耸肩] 无论如何，我很确定有人因为我的评论，这是真正的成熟的[/sarcasm] 我的回答有效，并且没有依赖关系。

@Kolink 在你第一次发表评论后，当你谈到成熟时，你听起来很有趣:)。当你正确使用 jQuery 时，它是一个很棒的工具。如果你是一个糟糕的程序员，你也可以用 vanilla JS 编写糟糕的程序。问题不在于 jQuery。 （顺便说一句，我认为您的回答没有反对意见）

【参考方案4】：

没有 jQuery：

var elms = document.querySelectorAll("cite.fn"), l = elms.length, i;
for( i=0; i<l; i++) 
    if( (elms[i].innerText || elms[i].textContent) == "blabla") 
        elms[i].style.color = "red";
    

【讨论】：

请注意querySelectorAll will not natively work in IE7 and below。使用 jQuery 之类的 JavaScript 框架不必担心太多。