Question

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

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

这是我用来获取自定义属性集的所有元素的javascript：

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

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

$('rect[width]');

有人可以解释为什么会这样，以及我可以做些什么来在jQuery选择器中使用SVG元素的自定义属性？我使用自定义数据属性，因为SVG元素没有我可以使用的ID或类。

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

Answer 1

数据属性名称必须至少包含一个字符且必须以'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

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

1 个答案: