是否存在具有特定 innerHTML 的元素？答案

【问题标题】：Does an element with a specific innerHTML exist?是否存在具有特定 innerHTML 的元素？
【发布时间】：2014-04-24 10:40:04
【问题描述】：

我有一个包含值的跨度元素列表：

    <span>Example1</span>
    <span>Example2</span>
    <span>Example3</span>
    <span>Example4</span>
    <span>Example5</span>

我怎样才能检查是否有一个跨度，例如“Example4”？

我尝试了以下方法但没有结果：

    if($('span').textContent = value){
     console.log('exists');
    }

    if($('span').html(value){}
    if($('span').html(value).length > 0){}

但它们总是返回 true..

感谢阅读:)

【问题讨论】：

您要检查元素是否包含字符串或子字符串或元素的内容以完全匹配字符串？

标签： javascript jquery html innerhtml

【解决方案1】：

有一个:contains 选择器：

if ( $('span:contains("Example4")').length > 0 ) { ... }

但是，如果存在带有 "Example 40" 之类文本的 <span> 元素，则此方法是 will fail。为了进行严格的比较，您可以使用 .filter 方法的技巧：

if ( $('span').filter(function() {
    return $.trim($.text(this)) === 'Example4';
}).length > 0 ) { ... }

【讨论】：

只希望文本Example41等没有跨度。;)
@Archer 是的，这是这种方法的主要缺点；）
我 +1 是因为它可能不会发生。我会用地图或过滤器代替。不过，这可能需要百分之一秒的时间：D
感谢@VisioN，那就更好了！ :o

【解决方案2】：

请先对其进行测试并使用它来适应您的代码块。

    <!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">

    <script src="jquery-1.7.1.js"></script>
    <script type="text/javascript">
        function createElement123(){
            if ( $('span:contains("Example4")').length > 0 ) {
                alert('Exists');
            } else {
                alert('Not Exists');
            }
        }
    </script>
</head>
<body>
    <input type="button" onclick="createElement123()" value="Check Text Exists"/>
    <span>Example1</span>
    <span>Example2</span>
    <span>Example3</span>
    <span>Example4</span>
    <span>Example5</span>

</body>
</html>

希望它能帮助您解决问题。

【讨论】：

【解决方案3】：

Array 方法some (IE9+) 如果任何成员符合给定条件，则返回 true：

var matched = $('span').toArray().some(function(node) {
  return node.innerHTML == 'Example4';
});

【讨论】：