查找内部包含文本和其他 dom 元素的 dom 元素答案

【问题标题】：Find dom elements containing text and other dom elements inside查找内部包含文本和其他 dom 元素的 dom 元素
【发布时间】：2011-09-22 08:33:22
【问题描述】：

我正在尝试将一个类应用于所有包含文本或其中包含文本和其他 dom 元素的元素。至少元素内必须有某种文本。

这个 div 应该得到类：

<div class="theClass">Some text</div>

这个 div 也应该得到类：

<div class="theClass">Some text<div class="theClass more">More text</div></div>

但是这个应该只给子div类：

<div class=""><div class="theClass more">More text</div></div>

目前我正在使用 :hasText 选择器，我在这里找到了 finding elements with text using jQuery。

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;
};

但它只返回包含文本的元素。我喜欢包含文本和其他元素（如果有的话）的元素。

谢谢！

【问题讨论】：

标签： jquery dom text

【解决方案1】：

我没有完全理解，但会是这样吗：

<div ><div class="more">More text</div></div>

<div >Some text<div class="more">More text</div></div>

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

$('div:hasText').addClass('theClass')

你得到：

  <div><div class="more theClass">More text</div></div>

<div class="theClass">Some text<div class="more theClass">More text</div></div>

【讨论】：

谢谢，我自己也试过了，但出现错误：element.firstChild 为空
啊，我明白了。因为我喜欢用：$('*:hasText').addClass('theClass')
我们快到了 :) 我更新了代码以向您展示内部带有图像的 div 也可以获取 theClass。由于空格:) 请参阅：jsfiddle.net/vSXd5/3 - 如果您将所有内容都放在一起，例如
它不会获得课程。

【解决方案2】：

我是这样尝试的。

 // content - children == no.of. text nodes.
    $.fn.islooseTextInside = function(c){
        jq = this;
        jq.each(function(){
            var $th = $(this);
            //no text nodes
            if(($th.contents().length - $th.children().length)  == 0){
                $th.children().islooseTextInside();
            }
            //only text nodes
            if($th.contents().length &&  $th.children().length == 0){
                applyClass($th)
            }
            //both are present
            if(( $th.contents().length - $th.children().length  ) > 0 ){    
                applyClass($th)
                $th.children().islooseTextInside();
            }
        })

        function applyClass(o){
            o.addClass('theClass')
        }
    }
    $("body div").islooseTextInside();

示例 HTML：

<body>
    <div>Some text</div>
    <div>Some text<div>Some text</div></div>
    <div><div>Some text</div></div>
</body>

【讨论】：

【解决方案3】：

在 Nicola Peluchetti 的帮助下，我设法用以下功能修复了它，但它仍然不是最好的！

jQuery.fn.cleanWhitespace = function() {
    textNodes = this.contents().filter(
    function() { return (this.nodeType == 3 && !/\S/.test(this.nodeValue)); })
    .remove();
    return this;
}

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

所以首先清理所有空格，因为如果你不清理它，<div> <img src="noimage"></div> 将是一个文本元素（因为空格）。

当 firstChild 不是 nodeType 3 时，您应该再次调用函数本身。但我正在处理它。将在此处发布解决方案！

【讨论】：