检查是不是有任何标签具有特定的内部 HTML

Posted 2023-03-04

【中文标题】检查是不是有任何标签具有特定的内部 HTML

【英文标题】：Check if any tags have a certain inner HTML检查是否有任何标签具有特定的内部 HTML

【发布时间】：2012-12-13 04:57:36

【问题描述】：

如果 id 为“word”的 div 中的任何跨度具有值为 v 的内部 html，我将如何编写一个返回 true 的 jquery 函数？对于选择器，我有：

$('#word span').html()

我对遍历它们并返回布尔值的正确方法感到困惑，因为目前我在该 div 中有 5 个 span 标签。

【参考方案1】：

contains 选择器

由于您已经使用 jQuery，您可以利用它的 .contains 方法或 ':contains' 伪选择器：

$("#word span").contains("word")

或

$("#word span:contains(word)")

这不会为每个包含该单词的跨度返回 true，而是为包含该单词的元素返回 true。你会得到一个匹配元素的列表，可以像这样操作：

var $matched = $("word span").contains("word");

$matched.each(function (i, el) 
    // do something with the el
);

参考

http://api.jquery.com/jQuery.contains/

【参考方案2】：

你可以使用filter方法：

$("#word span").filter(function () 
      return this.innerHTML === v; // in case that v is a variable
      // return $(this).text() === 'v';  
).length;

【讨论】：

在选择器中添加':contains(' + v + ')' 并过滤掉所有带有空格或换行符的愚蠢节点会更好吗？然后filter() 仅应用于可以完全等于文本的文本节点。我从来没有真正比较过它们的速度。

@LeeMeador 好吧contains 选择器选择包含特定值的元素，而不是那些其内容等于该值的元素（+ 隐藏字符 i>)，它选择\n v、v something、v ，它与完全匹配不同，因此此处不能选择删除空格和其他隐藏字符，在这些情况下使用filter 和$.trim是最好的选择。

【参考方案3】：

您可以像在$("#word span:contains(v)") 中一样使用:contains，但这会选择包含“v”的跨度，而不是将其作为精确值。 .html 仅返回所选 first 元素的 html 字符串，因此您可能希望使用 .each 进行迭代并进行精确比较：

var count = 0;
$("#word span").each(function () 
   if ($.trim($(this).text()) === 'v') 
      count++;
   
);

【讨论】：

可能是先使用contains 的组合？这样，您只缓存潜在的匹配项，然后仅通过一组集中的跨度进行迭代，而不是一直缓存和迭代所有跨度。我根本不担心性能，我只是在阅读代码的时候从逻辑的角度来看待它。

这是一个不错的替代 contains，让我想知道 contains 的效率如何，因为它必须在内部做一些非常相似的事情。我去看看源代码。