仅选择直接包含文本的元素 [英] Select only elements who directly contain text

问题描述

所以我有这样的东西:

<div class="main">
  <div class="useless">
    text I don't want.    
  </div>
  <div class="useless">
    text I don't want.    
  </div>
  <div class="narrow">
    text I'm searching for
  </div>
  <div class="useless">
    text I don't want.    
  </div>
  <div class="useless">
    text I don't want.    
  </div>
</div>

使用jQuery可爱的 :contains选择器，我可以搜索关键字，但是它将同时返回父母和孩子.

Using jQuery's lovely :contains selector, I can search for a keyword, but it will return both the parent and the child.

我希望它只返回直接包含我要搜索的单词的元素.

I'd like it to only return elements who directly contain the word for which I'm searching.

Stackoverflow有用地建议此链接作为一个链接以前的尝试，但是由于它正在爬网所有dom节点并且需要大量不清楚的代码，因此似乎非常笨拙.

Stackoverflow usefully suggested this link as a previous attempt, but it seems extremely clunky since it's crawling all dom nodes and requires a lot of unclear code.

推荐答案

此脚本将查找包含特定文本的所有节点.它还将允许您对文本(正则表达式等)进行任何字符串测试.

This script will find all nodes that contain a specific text. It will also allow you to do any string tests on the text (regex etc).

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

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

以下是用于测试的小提琴: http://jsfiddle.net/85qEh/4/

Here is a fiddle for testing: http://jsfiddle.net/85qEh/4/

PS-要提高速度，请使用其他顶级选择器.例如，如果您只需要在#container内部，则可以var textNodes = $('#container')...

PS - For increased speed use a different top level selector. For example if you only need inside #container then you would var textNodes = $('#container')...

这篇关于仅选择直接包含文本的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！