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

发布于 2024-12-06 07:24:31 字数 953 浏览 0 评论 0原文

我试图将一个类应用于包含文本或内部包含文本和其他 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 选择器使用 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;
};

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

谢谢！

原文

I'm trying to apply a class to all elements which contain text or which contain text and other dom elements inside. At least there must be some sort of text inside the element.

This div should get the class:

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

This div should get the class too:

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

But this one should only give the child div the class:

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

At the moment i'm using the :hasText selector which i found here 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;
};

But it only returns elements which contain text. I like to have elements which contain text and other elements (if there are any).

Thanks!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

仙女山的月亮 2024-12-13 07:24:31

我不完全明白，但可能是这样的：

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

I don't get it fully but could it be like this:

<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')

You get:

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

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

回复收藏 0 原文

高跟鞋的旋律 2024-12-13 07:24:31

我正在尝试这样。

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

i was trying like this.

 // 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();

Sample HTML:

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

回复收藏 0 原文

谎言月老 2024-12-13 07:24:31

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

因此，首先清理所有空白，因为

如果您不清理它（因为有空格），

将是一个文本元素。

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

With some help of Nicola Peluchetti I managed to fix it with the following functions, but it's still not the best!

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

So first clean all the whitespaces because <div> <img src="noimage"></div> would be a text element to if you don't clean it (because of the space).

You should make the function call itself again when the firstChild isn't a nodeType 3.. but i'm working on it. Will post the solution here!

回复收藏 0 原文

~没有更多了~