自分のアプリケーションで「読み込み」というカスタムjqueryイベントを作成しました。私は、このイベントがトリガされたときに、スピンナでマスク要素を追加したいと思います。その部分を問題なく理解することができます。しかし、いくつかの要素（画像、フォーム入力など）は子要素を追加できません。このイベントのターゲットが子要素を受け取ることができるかどうかを検出できる必要があります。できない場合は、スピナー&マスクを親要素に追加します。html要素が子ノードを追加できるかどうかをどのように検出しますか？
あなたが名前をチェックする必要があります：
/*global $, jQuery */
function isVoid(el) {
var tags = ['area', 'base', 'br', 'col', 'command', 'embed', 'hr', 'img', 'input',
'keygen', 'link', 'meta', 'param', 'source', 'track', 'wbr'],
i = 0,
l,
name;
if (el instanceof jQuery) {
el = el[0];
}
name = el.nodeName.toLowerCase();
for (i = 0, l = tags.length; i < l; i += 1) {
if (tags[i] === name) {
return true;
}
}
return false;
}
をそして、このようにそれを使用します。
var el = document.getElementById('el'),
elj = $('#el');
if (!isVoid(el)) {
// append
}
You 子要素を追加すると、レンダリングされません。これは意味的な区別のように聞こえるかもしれませんが、あなたの問題にとっては重要です.DWはを知らない特定のタグがレンダリングされているかどうか。
あなたの最善の策は、単にマニュアルをチェックすることです：
var allowChildren = function(elem) {
return ! (elem.nodeName in { INPUT : true, IMG : true }) ;
};
私はそのブール構文を見たことがありません。それは有効ですか？だから私は空の要素の仕様を見て、そのハッシュに追加することができると思います。 – demersus
void要素の表を作成することが唯一の真の解決策になると思います。あなたは 'return！{input：true、img：true} [elem.nodeName]' –
http://jsfiddle.net/mblase75/eGyRH/3/を返すことを前提としていますが、 'タグが表示されます。これはDOMデバッガに表示され、ブラウザウィンドウには表示されません。 – Blazemonger
http://jsfiddle.net/mblase75/eGyRH/3/ - Chromeでは、表示されていなくても<input>タグに子要素を追加できます。これはDOMデバッガに表示され、ブラウザウィンドウには表示されません。
しかし、私はそれが.width()だテストすることができ、それがゼロかないに等しいです参照：http://jsfiddle.net/mblase75/eGyRH/4/
alert($('.element').append('<span>asdf</span>').children().width());
しかし、これもゼロ幅になります例えば、私は隠しへのスパンを追加している場合などdiv：http://jsfiddle.net/mblase75/eGyRH/5/ - 完全には信頼できません。
受け入れられた回答は、に基づいて非常に素晴らしい機能を持っています。 jQueryのワンライナーで置き換えることができます。
node.is("area,base,br,col,command,embed,hr,img,input,keygen,link,meta,param,source,track,wbr")
indexOfは配列のクロスブラウザではありません。https://developer.mozilla.org/ja/JavaScript/Reference/Global_Objects/Array/indexOf – Joe
IE8以降をサポートする場合は_.indexOfを使用してください。 – jasssonpet
ニース。テキストノードがその方法を見つけるために '' text ''を追加する価値があります。 –