Come si rileva se un elemento html può aggiungere nodi figlio?

Ho creato un evento jquery personalizzato chiamato "caricamento" nella mia applicazione. Voglio aggiungere un elemento di mascheramento con uno spinner, quando questo evento viene attivato. Posso capire quella parte senza problemi. Tuttavia, alcuni elementi (immagini, input di modulo, ecc.) Non possono aggiungere elementi figlio. Devo essere in grado di rilevare se l'obiettivo di questo evento può ricevere elementi figlio. Se non è possibile, aggiungerò la maschera filatore & all'elemento padre.Come si rileva se un elemento html può aggiungere nodi figlio?

fonte

2012-06-22 demersus

Devi controllare il nome:

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

e usarlo in questo modo:

var el = document.getElementById('el'), 
    elj = $('#el'); 

if (!isVoid(el)) { 
    // append 
}

fonte

2012-06-22 18:38:06 jasssonpet

indexOf non è cross browser per gli array: https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/indexOf – Joe

Utilizzare _.indexOf se si supporta IE8 e precedente – jasssonpet

Nice. Può valere la pena aggiungere ''# testo'' nel caso in cui un nodo di testo trovi la sua via. –

È possibile aggiungere elementi secondari, non verranno semplicemente visualizzati. Questo può sembrare una distinzione semantica, ma è fondamentale per il tuo problema: il DOM non conosce se un determinato tag è reso o meno.

La cosa migliore è solo quello di controllare il manuale:

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

fonte

2012-06-22 18:23:06 Malvolio

Non ho mai visto che la sintassi booleana. È valido? Quindi suppongo che potrei cercare le specifiche per gli elementi void e aggiungerlo a quell'hash. – demersus

Penso che la creazione di una tabella di elementi vuoti sarà l'unica soluzione reale. Anche se presumo tu intendi 'return! {Input: true, img: true} [elem.nodeName]' –

http://jsfiddle.net/mblase75/eGyRH/3/ - Chrome mi consente di aggiungere un elemento figlio a un ' 'tag, anche se non è visualizzato affatto. È visibile nel debugger DOM, ma non nella finestra del browser. – Blazemonger

http://jsfiddle.net/mblase75/eGyRH/3/ - Chrome mi consente di aggiungere un elemento figlio a un tag <input>, anche se non è visualizzato affatto. È visibile nel debugger DOM, ma non nella finestra del browser.

Tuttavia, posso provare che è .width() e vedere che è uguale a zero o no: http://jsfiddle.net/mblase75/eGyRH/4/

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

Tuttavia, questo sarà anche la larghezza pari a zero se, per esempio, sto aggiungendo l'arco ad una nascosta div: http://jsfiddle.net/mblase75/eGyRH/5/ - quindi non è totalmente affidabile neanche.

fonte

2012-06-22 18:41:45 Blazemonger

La risposta accettata ha una funzione molto bella basata su which types of nodes can be void. Esso può essere sostituito da un jQuery one-liner:

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

fonte

2017-04-25 15:18:25

Come si rileva se un elemento html può aggiungere nodi figlio?

risposta

Problemi correlati