在Chrome中使用jQuery和SVG自定义属性

我在我的网页上有一些我想用jQuery访问的SVG元素。 SVG元素有一些自定义的数据属性附加到它们，我想在jQuery选择器中使用它来获取正确的元素。我的问题是，自定义属性选择器不适用于Chrome，而它在IE9和Firefox中可用。下面是一个SVG元素的例子：在Chrome中使用jQuery和SVG自定义属性

<rect width="75" data-myAttribute="someValue"></rect>

这是我会用获得与设置自定义属性的所有元素的javascript：

$('rect[data-myAttribute]');

所以会发生什么时，该语句返回0 Chrome中的元素，同时它返回Firefox和IE中的所有X元素。然而，在选择器中使用“标准”属性似乎适用于所有浏览器。该声明将例如正确返回的所有元素在所有浏览器：

$('rect[width]');

能有人请解释为什么会发生，以及我能做什么使用上的jQuery选择SVG元素自定义属性？我使用自定义数据属性，因为SVG元素没有我可以使用的ID或类。

注意：这个特定情况下的SVG元素是由HighCharts JavaScript库创建的，但我想这应该不重要。我使用jQuery版本1.8.0。

来源

2013-04-23 Knut Marius

数据属性名称必须至少有一个字符长，必须以为前缀'data-'。它不应该包含任何大写字母。

试试这个 -

<rect id='r' width="75" data-value="someValue">d</rect> 

$('rect[data-value]'); // select element with data-value attribute 

$('rect').data('value'); // read attribute value

jsFiddle working demo

来源

2013-04-23 09:27:34

感谢您的快速回复！但这似乎并没有为我返回任何东西。数据函数被定义，但结果对象只是未定义的（也适用于像“width”这样的标准属性）。我需要更新的jQuery版本吗？ – 2013-04-23 09:32:09

看到这个工作 - 我刚刚更改了数据属性名称 - http://jsfiddle.net/mohammadadil/RFtgD/ – 2013-04-23 09:55:03

我不认为这正是我所追求的。我编辑你的小提琴以突出问题：http://jsfiddle.net/84YrN/ 在这里它应该只得到jQuery元素a和c（因为b没有数据值属性）。但是，它会记录所有三个矩形。 – 2013-04-23 10:20:23

在Chrome中使用jQuery和SVG自定义属性

回答

相关问题