使用 jQuery 查找带有文本的元素答案

【问题标题】：finding elements with text using jQuery使用 jQuery 查找带有文本的元素
【发布时间】：2010-11-04 08:49:28
【问题描述】：

我想在一个包含文本字符串的 div 中创建一个包含所有 html 元素的数组，例如

<p>some string</p>.

我不想获取字符串，我希望数组项成为元素（在示例中，将是 p 节点）。我事先不知道字符串是什么，所以我无法查找要匹配的字符串值。我也不希望空文本节点出现在数组中。

谢谢！

【问题讨论】：

标签： jquery textnode

【解决方案1】：

$("#my_div *").filter(function()
{
     var $this = $(this);
     return $this.children().length == 0 && $.trim($this.text()).length > 0;
})

此版本不会返回包含有文本元素的父元素，只返回最后一级元素。

可能不是最快的，但在 StackOverflow 主页上运行良好:)

【讨论】：

根据我的测试，这是只返回包含文本的元素，而不是它们的父元素的解决方案。谢谢！！！
$('*:not(:has(*))') 可能是选择无子（叶）节点的更好方法...绝对减少输入。
当包含文本的元素具有不包含文本的子元素时，此解决方案会中断。它仅在包含文本的元素没有其他子元素时才有效。

【解决方案2】：

自定义选择器可能对您的情况有所帮助：

jQuery.expr[':'].hasText = function(element, index) {
     // if there is only one child, and it is a text node
     if (element.childNodes.length == 1 && element.firstChild.nodeType == 3) {
        return jQuery.trim(element.innerHTML).length > 0;
     }
     return false;
};

之后，您可以简单地这样做：

$('#someDiv :hasText') // will contain all elements with text nodes (jQuery object)
$('#someDiv :hasText').get() // will return a regular array of plain DOM objects

我假设您只是尝试选择其中只有文本的元素。

【讨论】：

很好的答案，只是一个小错字——应该检查 nodeType 而不是 nodeValue...

【解决方案3】：

你可以使用not和空选择器来获取非空元素，而转换为数组可以使用get来实现

$("#theDiv > :not(:empty)").get();

上述选择器获取“theDiv”的所有非空子元素（即它们有子元素或文本），然后将匹配的集合转换为数组。

如果您只想要其中包含文本的元素，这应该可以...

$("#theDiv > :not(:empty, :has(*))").get();

要去掉有空格的元素，你可以使用过滤器

$("#theDiv > :not(:has(*))").filter(function() { 
                 return $.trim(this.innerHTML).length > 0;
         }).get();

【讨论】：

如果他想要里面只有文本的元素，这是行不通的。这也会返回任何有任何子元素的元素，即使这些子元素中都没有文本。
另一个注意事项，这也只适用于 div 的直接子级（不确定这是否是所需的行为）。删除 > 以检查所有祖先。在这种情况下，* 也不起作用。
更新了关于选择内部只有文本的元素。感谢您接受 * 我已经相应地更新了我的答案
下部选择器几乎是正确的，但它也会选择具有空（全空白）文本节点的元素。
让我上那个:)。我只是想找到一种使用单线的方法，而无需求助于闭包（随后调用 filter 将删除带有空格的元素）或自定义选择器。

【解决方案4】：

您可以循环遍历 children 并获取具有 .text() 值 != "" 的所有内容

【讨论】：

这听起来是个不错的计划，但我对 jQuery 的了解还不够，无法理解如何构造符合您描述的语法。你能举个例子吗？谢谢。

【解决方案5】：

var array = [];
var divSelector = "div.mine";

$(divSelector).contents().each(function()
{
   // If not an element, go to next node.
   if (this.nodeType != 1) return true;       

   var element = $(this);
   if ($.trim(element.text()) != "")
     array.push(element);
});

array 是包含一些文本的元素数组。

【讨论】：

【解决方案6】：

 $(function() {
        var array = new Array();
        $("#testDiv *").each(function(x, el) {

            if ($.trim($(el).text()) != '' ) {
                array.push(el);
            }
        });
        alert(array.length);
    });

【讨论】：

【解决方案7】：

d 是您要在其下查找内容的 div
v 是一个空数组
我必须从 0 开始。

使用 $.trim 是为了避免得到只是空白的节点。

$("*",d).filter( function() { 
     return $.trim($(this).text()) != ""
  } ).each( function() { 
     v[i] = $(this).text(); 
     i++; 
  } );

也可以使用 v.push($(this))...这让我完全忘记了。

【讨论】：

这看起来很有希望，会尝试一下。如果我只想要元素，而不是实际文本，最终的分配将是： v[i] = $(this); ?
这取决于你是否希望它是一个 jQuery 对象。如果你希望它是一个 jQuery 对象，它会是 $(this)。如果你只想要 DOM 元素，那就是这个。
实际上，您甚至不需要这样做...您所要做的就是删除 .each()，因为这样做的唯一目的是提取文本。（抱歉，我在发表最后一条评论时有点分心。

【解决方案8】：

使用 :contains 选择器：

var matches = new Array();
$('#start_point *:contains(' + text + ')').each(function(i, item) {
 matches.push( item );
}

【讨论】：

他说他没有任何具体的文字要搜索。