Jquery：包含没有子节点的选择器

Question

我需要做一个函数来改变javascript（jquery）中dom元素的颜色（在这个例子中）但是我有一些麻烦：包含选择器但我需要使用因为我没有特定的ID或类。

HTML：

<p id="title">John</p><!-- contain John must be red -->

<div id="description">John</div><!-- contain John must be red -->


<div id="element">
    <p id="element1">John</p><!-- contain John must be red -->
    <p id="element2">Anonymous</p><!-- dont contain John dont change color -->
</div>

此代码中的

ID只是为了向您显示我的问题。

Js：

$("div:contains('John'), p:contains('John')").css("color", "red");

问题：

此脚本会进行不必要的更改（＃element2）

我已经检查过：Jquery doc但是在这个例子中是简单的dom。

此处的可测试示例：JSFIDDLE

Answer 1

尝试使用将div与其他元素排除，

$("div:contains('John'):not(:has(*)), p:contains('John')").css("color", "red");

---

如果你的html有可能包含这样的元素，

<div id="description">John<p>test</p></div>

然后最终你必须同意@ TrueBlueAussie的答案。

DEMO

Answer 2

您可以创建自己的过滤器，删除子元素并仅检查当前元素的textNodes。

由于您尝试匹配的字符串也会出现在评论中，因此innerHTML的任何使用都已用完，因此会使用textContent。

$("#bug").on('click', function () {

    $("div, p").filter(function() {
        var clone = this.cloneNode(true);

        while (clone.firstElementChild) {
            clone.removeChild(clone.firstElementChild);
        }

        return clone.textContent.indexOf('John') != -1;
    }).css("color", "red");

});

FIDDLE