アプリケーションで「loading」というカスタムjqueryイベントを作成しました。このイベントがトリガーされたときに、スピナーでマスキング要素を追加したいと思います。その部分は問題なく理解できます。ただし、一部の要素(画像、フォーム入力など)は子要素を追加できません。このイベントのターゲットが子要素を受け取ることができるかどうかを検出できる必要があります。できない場合は、スピナーとマスクをその親要素に追加します。
4 に答える
名前を確認する必要があります。
/*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
}
子要素を追加できますが、レンダリングされません。これは意味上の違いのように聞こえるかもしれませんが、問題にとって重要です。DOMは、特定のタグがレンダリングされているかどうかを認識していません。
最善の策は、マニュアルを確認することです。
var allowChildren = function(elem) {
return ! (elem.nodeName in { INPUT : true, IMG : true }) ;
};
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")