Question

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

这个div应该上课：

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

这个div也应该上课：

<div class="theClass">Some text<div class="theClass more">More text</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;
};

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

谢谢！

Answer 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>

Answer 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>

Answer 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时，你应该让函数再次调用自己..但我正在研究它。将在此处发布解决方案！

查找包含文本和其他dom元素的dom元素

3 个答案: