1 
<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 は簡単に処理できますが、3 番目は問題があります。子の部分をアサートする方法は知っています$('#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>");
});
4

1 に答える 1

6

は要素の子のみをカウントし、テキスト ノードも含む
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>")
});

デモ

于 2013-06-20T16:27:16.400 に答える