1

我的网页上有一些我想用 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。

4

1 回答 1

3

数据属性名称必须至少有一个字符长，并且必须以“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 工作演示

于 2013-04-23T09:27:34.977 回答