13

我在我的应用程序中创建了一个名为“加载”的自定义 jquery 事件。当触发此事件时,我想附加一个带有微调器的屏蔽元素。我可以毫无问题地弄清楚那部分。但是,某些元素(图像、表单输入等)不能附加子元素。我需要能够检测此事件的目标是否可以接收子元素。如果不能,那么我会将微调器和掩码添加到它的父元素中。

4

4 回答 4

5

您必须检查名称:

/*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
}
于 2012-06-22T18:38:06.413 回答
1

可以添加子元素,它们只是不会渲染。这听起来像是语义上的区别,但它对您的问题至关重要:DOM 不知道是否呈现特定标签。

你最好的选择是检查手册:

var allowChildren = function(elem) {
   return ! (elem.nodeName in { INPUT : true, IMG : true }) ;
};
于 2012-06-22T18:23:06.083 回答
0

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/ - 所以它也不完全可靠。

于 2012-06-22T18:41:45.563 回答
0

接受的答案有一个非常好的功能,基于哪些类型的节点可以是 void。它可以用一个 jQuery 单线代替:

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

于 2017-04-25T15:18:25.237 回答