Làm cách nào để bạn phát hiện xem phần tử html có thể nối thêm các nút con không?

Question

Tôi đã tạo một sự kiện jquery tùy chỉnh được gọi là 'tải' trong ứng dụng của tôi. Tôi muốn nối thêm một phần tử mặt nạ với một spinner, khi sự kiện này được kích hoạt. Tôi có thể tìm ra phần đó mà không có vấn đề gì. Tuy nhiên, một số yếu tố (hình ảnh, đầu vào biểu mẫu, v.v.) không thể nối thêm các phần tử con. Tôi cần để có thể phát hiện nếu mục tiêu của sự kiện này có thể nhận các phần tử con. Nếu nó không thể, sau đó tôi sẽ thêm mặt nạ spinner & vào phần tử cha của nó.

Answer 1

Bạn phải kiểm tra tên:

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

Và sử dụng nó như thế này:

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

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

Answer 2

Bạn có thể thêm phần tử con, chúng sẽ không hiển thị. Điều này nghe có vẻ giống như một sự khác biệt ngữ nghĩa, nhưng điều đó rất quan trọng đối với vấn đề của bạn: DOM không biết liệu một thẻ cụ thể có được hiển thị hay không.

Tốt nhất là chỉ để kiểm tra thủ công:

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

Answer 3

http://jsfiddle.net/mblase75/eGyRH/3/ - Chrome cho phép tôi thêm phần tử con vào thẻ <input>, mặc dù thẻ không được hiển thị. Nó hiển thị trong trình gỡ rối DOM, không có trong cửa sổ trình duyệt.

Tuy nhiên, tôi có thể kiểm tra nó .width() và xem đó là bằng không hay không: http://jsfiddle.net/mblase75/eGyRH/4/

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

Tuy nhiên, đây cũng sẽ là zero chiều rộng nếu, ví dụ, tôi thêm khoảng một ẩn div: http://jsfiddle.net/mblase75/eGyRH/5/ - vì vậy nó không hoàn toàn đáng tin cậy.

Answer 4

Câu trả lời được chấp nhận có một fuction rất đẹp dựa trên which types of nodes can be void. Nó có thể được thay thế bằng một jQuery one-liner:

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