Как вы обнаруживаете, может ли элемент html добавлять дочерние узлы?

Я создал пользовательское событие jquery под названием "загрузка" в моем приложении. Я хочу добавить элемент маскировки с помощью счетчика, когда это событие будет запущено. Я могу понять эту часть без проблем. Однако некоторые элементы (изображения, входы формы и т.д.) Не могут добавлять дочерние элементы. Мне нужно выяснить, может ли объект этого события принимать дочерние элементы. Если он не может, то я добавлю spinner и mask к его родительскому элементу.

Ответ 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
}

Ответ 2

Вы можете добавить дочерние элементы, они просто не будут отображаться. Это может звучать как семантическое различие, но оно имеет решающее значение для вашей проблемы: DOM не знает, отображается ли конкретный тег или нет.

Лучше всего только проверить руководство:

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

Ответ 3

http://jsfiddle.net/mblase75/eGyRH/3/ - Chrome позволяет добавить дочерний элемент в тег <input>, даже если он вообще не отображается. Он отображается в отладчике DOM, а не в окне браузера.

Однако я могу проверить его .width() и увидеть, что он равен нулю или нет: http://jsfiddle.net/mblase75/eGyRH/4/

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

Однако это также будет нулевой шириной, если, например, я добавляю span к скрытому div: http://jsfiddle.net/mblase75/eGyRH/5/ - - поэтому он не полностью надежный.

Ответ 4

Принятый ответ имеет очень хороший fuction, основанный на какие типы узлов могут быть недействительными. Его можно заменить на однострочный jQuery:

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