Question

我在我的应用程序中创建了一个名为“loading”的自定义jquery事件。当触发此事件时，我想要使用微调器附加一个masking元素。我可以找出那个没有问题的部分。但是，某些元素（图像，表单输入等）不能附加子元素。我需要能够检测此事件的目标是否可以接收子元素。如果它不能，那么我将添加微调器＆amp;掩盖它的父元素。

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/ - 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/，这也将是零宽度 - 所以它也不是完全可靠的。

Answer 4

根据which types of nodes can be void，接受的答案有一个非常好的功能。它可以被jQuery one-liner代替：

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

如何检测html元素是否可以附加子节点？

4 个答案: