一个直接包含文本的元素的jQuery选择器？

Question

我能够使用:contains选择器使这部分工作,但我的问题是,如果一个元素包含一个元素,其中包含仍然返回的文本.例如:

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

将选择以下两个div:

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

小提琴:http://jsfiddle.net/TT7dR/

如何只选择"直接"包含文本的div？这意味着在上面的示例中仅选择子div.

更新:

只是为了澄清,如果我在搜索文本"别的"而不是"测试",那么我只想找到父div.

Answer 1

$('div>:contains("test")')不是一般解决方案,它只适用于您的具体示例.它仍然匹配其后代包含文本的任何元素test,只要它的父元素是a 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);
        }
    }
}

Answer 2

您可能必须执行效率低下的查询。如果有人找到一个可以过滤掉子元素的选择器，请不要使用此解决方案：http : //viralpatel.net/blogs/2011/02/jquery-get-text-element-without-child-element.html

$("div:contains('test')")
    .clone()    //clone the element
    .children() //select all the children
    .remove()   //remove all the children
    .end()  //again go back to selected element
    .filter(":contains('test')")

编辑：上面的片段只是为了测试元素，在实现中它看起来更像这样：http : //jsfiddle.net/rkw79/TT7dR/6/

$("div:contains('test')").filter(function() {
    return (
    $(this).clone() //clone the element
    .children() //select all the children
    .remove() //remove all the children
    .end() //again go back to selected element
    .filter(":contains('test')").length > 0)
}).css('border', 'solid 1px black');

Answer 3

只是为了完成知识库.如果您需要获取包含特定文本或字符的正文(不仅是DIV)中的所有DOM元素,您可以使用:

function getNodesThatContain(text) {
    var textNodes = $(document).find(":not(iframe, script)")
      .contents().filter( 
          function() {
           return this.nodeType == 3 
             && this.textContent.indexOf(text) > -1;
    });
    return textNodes.parent();
};

console.log(getNodesThatContain("test"));

希望有所帮助.

jsfiddle:http://jsfiddle.net/85qEh/2/

致谢:DMoses