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>

我有一些逻辑需要跳过符合以下条件的元素

没有HTML
仅限br或nbsp
只有某种类型的子元素（b，i，img）

我可以轻松处理1/2，但第三个我遇到了麻烦。我知道如何断言子部分，$('#3fail').children().length，但我不知道如何确定是否有其他文本。

有关如何验证3的任何建议？我正在一个简单的.each函数

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

注意

有人发布了一个答案并得到了很多赞成，但它不起作用。这是一个测试答案的小提琴。

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

检查段落是否只有子元素没有文本

1 个答案: