檢查款只有子元素，沒有文本

Question

<p id='1'></p> 
<p id='1a'><br /></p> 
<p id='3success'><b>Match this</b></p> 
<p id='3fail'><b>Match this</b> but not now because of this test</p> 

我有一個需要跳過符合下列條件

1. 沒有HTML元素的一些邏輯
2. 只有BR或NBSP
3. 只有有子某些類型的元素（b，i，img）

我可以很容易地處理1/2，但第三個我遇到了問題。我知道如何斷言孩子的一部分，$('#3fail').children().length，但我不知道如何確定是否有額外的文字。

關於如何驗證3的任何建議？我處理元素的簡單.each功能

$('p').each(function(){ 
    var element = $(this) 
    if(matchesCondition(element)){ 
     doLogic(element) 
    } 
}); 

---

注意

有人張貼解答，並得到了很多upvotes的，但它不工作。這裏是一個小工具來測試答案。

http://jsfiddle.net/ncapito/k87rc/

我能夠解決@Kolink的答案

http://jsfiddle.net/ncapito/9D3tg/

var getNontextNodes; 
//coffeescript generated 
getNontextNodes = function (nodes) { 
    var cnt, n, _i, _len; 
    cnt = 0; 
    for (_i = 0, _len = nodes.length; _i < _len; _i++) { 
    n = nodes[_i]; 
    if (n.textContent.trim()) { 
     cnt++; 
    } 
    } 
    return cnt; 
}; 

$("p").each(function() { 
    if (
    (this.children.length === this.childNodes.length) 
    || 
    (getNontextNodes(this.childNodes) === this.children.length)) 
     $(this).append("<b style='color:green'>Success</b>"); 
    else 
    $(this).append("<b style='color:red'>Failed</b>"); 
}); 

Answer 1

您可以檢查元素是否只有通過檢查
if(this.children.length == this.childNodes.length)有子元素，因爲只有children[]計數元素兒童，而childNodes[]也包含文字節點。

清除此步驟後，您可以遍歷children[]陣列並檢查它們的tagName以查看它們是否在您的列表中。

編輯：我剛剛注意到，這將不允許任何空白，如換行符，元素之間。如果你希望允許空白而不是實際的文本，試試這個檢查來代替：
if(!(this.textContent || this.innerText).match(/\S/))

不，這是行不通的。這種意志，雖然：

var filter = [].filter ? [].filter : function(cb) {for(var i=0, l=this.length, ret=[]; i<l; i++) {if(cb(this[i])) ret.push(this[i]);} return ret;}; 
$("p").each(function(){ 
    if(this.children.length == this.childNodes.length || filter.call(this.childNodes,function(n) {return n.nodeType == 3 && n.nodeValue.match(/\S/);}).length == 0) 
     $(this).append("<b style='color:green'>Success</b>") 
    else 
     $(this).append("<b style='color:red'>Failed</b>") 
}); 

Demo