javascript - 直接包含文本的元素的 jQuery 选择器？

Question

我能够使用 :contains 选择器使此部分工作，但我的问题是，如果一个元素包含一个包含它仍然返回的文本的元素。例如:

$('div:contains("test")')

将选择下面的两个 div:

<div>something else
   <div>test</div>
</div>

fiddle :http://jsfiddle.net/TT7dR/

如何只选择“直接”包含文本的 div？这意味着在上面的示例中，只会选择子 div。

更新:

澄清一下，如果我正在搜索文本“其他内容”而不是“测试”，那么我只想找到父 div。

Answer 1

$('div>:contains("test")') 不是通用解决方案，它仅适用于您的特定示例。它仍然匹配其后代包含文本 test 的任何元素，只要其父元素是 div。

事实上，目前没有选择器只能选择包含目标文本的文本节点的直接父节点。为此，您必须亲自遍历 DOM 树，检查找到的目标文本的每个文本节点，或者编写一个插件来执行相同的操作。它会很慢，但不会像 :contains 那样慢(它不是标准 CSS 选择器，因此您无法获得浏览器原生的快速选择器支持)。

这是一个简单的 DOM 函数，您可以将其用作起点。可能会改进在相邻(非标准化)文本节点中查找文本，或将其隐藏在插件/选择器扩展中。

function findElementsDirectlyContainingText(ancestor, text) {
    var elements= [];
    walk(ancestor);
    return elements;

    function walk(element) {
        var n= element.childNodes.length;
        for (var i= 0; i<n; i++) {
            var child= element.childNodes[i];
            if (child.nodeType===3 && child.data.indexOf(text)!==-1) {
                elements.push(element);
                break;
            }
        }
        for (var i= 0; i<n; i++) {
            var child= element.childNodes[i];
            if (child.nodeType===1)
                walk(child);
        }
    }
}