javascript - jQuery 不创建区域标签

Question

我正在尝试使用 jQuery 动态创建图像映射，但我遇到了一个奇怪的行为:

alert( $('<area />').size() );                         // 1
alert( $('<area shape="circle" />').size() );          // 0
alert( $('<area />').attr("shape", "circle").size() ); // 1

换句话说，我不能一次创建一个区域标签；如果我说

$('<area shape="circle" coords="50,25,4" href="#" alt="foo" />')

然后什么都没有创建。但是，如果我逐渐这样做，它会起作用，例如

$('<area />')
    .attr("shape", "circle")
    .attr("coords", "50,25,4")
    .attr("href", "#")
    .attr("alt", "foo");

我不知道这是为什么，因为我可以创建各种具有属性和内容的其他元素，例如

$('<div id="foo" />')
$('<div id="bar">Hello World!</div>')

所以我不清楚为什么这不起作用。这并不是那么重要，因为我可以通过链接对 attr 的调用来使其 wirk，但这很烦人，我想了解这种行为。

Answer 1

安<area />元素仅在图像映射内定义(即 <map> 元素)。所以基本上以下是失败的(因为这是 jQuery 对您的标记所做的):

var div = document.createElement('div');
div.innerHTML = '<area shape="circle" coords="50,25,4" href="#" alt="foo" />';
return div.childNodes; // this is empty, as the browser didn't allow 
                       // the <area /> element inside the <div> element

这只是其中之一，显然伟大的 jQuery 还没有考虑到(还)。同时尝试:

var $area = $(
    '<map><area shape="circle" coords="50,25,4" href="#" alt="foo" /></map>'
).contents();

// $area is the jQuery object for the newly created <area /> tag

$area.attr('coords'); // "50,25,4"

// etc