用于直接包含文本的元素的jQuery选择器？

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

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

将选择以下两个div：

 
something else 
test
  

小提琴： 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 

Answer 2

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

 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

Answer 3

您可能必须执行无效查询。 如果有人找到设法过滤掉子元素的选择器，请不要使用此解决方案： 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 4

尝试添加大于：

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

Answer 5

这似乎对我有用：

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

http://jsfiddle.net/TT7dR/1/

这会强制匹配的:contains选择器成为

元素的直接子元素

Answer 6

请尝试以下方法：

 $("div>div:contains(test):only-of-type") 

Answer 7

查找特定元素，但不是父母

 var elementsContainingText = ($(':contains("' + text + '")', target)).filter(function() { return $(this).contents().filter(function() {return this.nodeType === 3 && this.nodeValue.indexOf(text) !== -1; }).length > 0; }); 

Answer 8

添加更多选择：

 if($(selector).text().trim().length) { var thetext = $(selector).contents().filter(function(){ return this.nodeType === 3; }).text().trim(); console.log(thetext); } 

它将仅选择文本并删除任何带标记的元素！

参考