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

我試圖將一個類應用於所有包含文本或其中包含文本和其他dom元素的元素。至少在元素內部必須有某種文本。查找包含文本和其他DOM元素裏面的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; 
};

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

謝謝！

來源

2011-09-22 Rein

我不完全得到它，但它可能是這樣的：

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

來源

2011-09-22 08:48:09

謝謝我也試過自己，但它的錯誤：element.firstChild爲null – Rein

我在這裏試過了，它適用於我：http://jsfiddle.net/vSXd5/ –

啊我明白了。這是因爲我喜歡使用：$（'*：hasText'）。addClass（'theClass'） – Rein

我是想這樣。

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

來源

2011-09-22 11:41:26 rajkamal

隨着尼古拉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時，您應該再次調用函數自己，但是我正在處理它。將在這裏發佈解決方案！

來源

2011-09-23 07:20:47 Rein

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

回答

相關問題