4

我正在尝试使用 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，但这很烦人，我想了解这种行为。

4

1 回答 1

4

<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
于 2009-11-20T00:51:08.173 回答