आप कैसे पता लगा सकते हैं कि कोई HTML तत्व बाल नोड्स को जोड़ सकता है या नहीं?

Question

मैंने अपने आवेदन में 'लोडिंग' नामक एक कस्टम jquery ईवेंट बनाया। जब यह घटना ट्रिगर होती है, तो मैं एक स्पिनर के साथ मास्किंग तत्व जोड़ना चाहता हूं। मैं बिना किसी समस्या के उस हिस्से को समझ सकता हूं। हालांकि, कुछ तत्व (छवियों, रूप इनपुट, आदि ..) बाल तत्वों को जोड़ नहीं सकते हैं। मुझे यह पता लगाने में सक्षम होना चाहिए कि इस घटना का लक्ष्य बाल तत्व प्राप्त कर सकता है या नहीं। यदि यह नहीं हो सकता है, तो मैं स्पिनर & मास्क को इसके मूल तत्व में जोड़ दूंगा।

Answer 1

आप नाम की जांच करने के लिए है:

/*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 
} 

Answer 2

आप बच्चे तत्व जोड़ सकते हैं, वे बस प्रस्तुत नहीं करेंगे। यह एक अर्थपूर्ण भेद की तरह लग सकता है, लेकिन यह आपकी समस्या के लिए महत्वपूर्ण है: DOM नहीं जानता है कि कोई विशेष टैग प्रस्तुत किया गया है या नहीं।

आपका सबसे अच्छा शर्त सिर्फ जांच करने के लिए मार्गदर्शन है:

var allowChildren = function(elem) { 
    return ! (elem.nodeName in { INPUT : true, IMG : true }) ; 
}; 

Answer 3

http://jsfiddle.net/mblase75/eGyRH/3/ - क्रोम मुझे <input> टैग में एक बाल तत्व जोड़ने देता है, भले ही यह बिल्कुल प्रदर्शित न हो। यह डोम डीबगर में दिखाई देता है, बस ब्राउजर विंडो में नहीं।

हालांकि, मैं यह .width() है परीक्षण करने और शून्य या नहीं के बराबर है देख सकते हैं: http://jsfiddle.net/mblase75/eGyRH/4/

alert($('.element').append('<span>asdf</span>').children().width());​ 

बहरहाल, यह भी शून्य चौड़ाई अगर, उदाहरण के लिए, मैं एक छिपा करने के लिए अवधि जोड़ रहा हो जाएगा div: http://jsfiddle.net/mblase75/eGyRH/5/ - तो यह पूरी तरह विश्वसनीय नहीं है।

Answer 4

स्वीकार्य उत्तर which types of nodes can be void पर आधारित एक बहुत अच्छी नीलामी है। यह एक jQuery एक लाइनर से बदला जा सकता है:

node.is("area,base,br,col,command,embed,hr,img,input,keygen,link,meta,param,source,track,wbr")