jQuery 不创建区域标签

发布于 2024-08-11 15:51:32 字数 819 浏览 5 评论 0原文

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

原文

I'm trying to use jQuery to dynamically create an image map, and I ran into a weird behavior:

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

In other words, I can't create an area tag all at once; if I say

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

then nothing is created. However, it works if I do it gradually, e.g.

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

I have no idea why this is, because I can create all kinds of other elements with attributes and content, e.g.

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

so I'm not clear on why this isn't working. This isn't all that important since I can make it wirk by chaining calls to attr, but that's annoying and I'd like to understand this behavior.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

柠北森屋 2024-08-18 15:51:32

元素仅在图像映射内部定义（即

元素）。所以本质上以下是失败的（因为这就是 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

An <area /> element is only defined inside an image map (i.e. <map> element). So essentially the following is failing (as this is what jQuery is doing with your markup):

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

It's just one of those things obviously the great jQuery has not accounted for (yet). In the meantime try:

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

回复收藏 0 原文

~没有更多了~