jQuery 和 SVG 在 Chrome 中具有自定义属性答案

【问题标题】：jQuery and SVG with custom attributes in ChromejQuery 和 SVG 在 Chrome 中具有自定义属性
【发布时间】：2013-04-16 10:49:46
【问题描述】：

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

【问题讨论】：

标签： jquery google-chrome svg

【解决方案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

【讨论】：

感谢您的快速回复！但这似乎对我没有任何回报。数据函数已定义，但结果对象只是未定义（也适用于“宽度”等标准属性）。我需要更新的 jQuery 版本吗？
看到这个工作——我只是改变了数据属性名称——jsfiddle.net/mohammadAdil/RFtgD
我不认为这正是我所追求的。我编辑了你的小提琴以突出问题：jsfiddle.net/84YrN 这里它应该只获取 jQuery 元素 a 和 c （因为 b 没有 data-value 属性）。但是它确实记录了所有三个矩形
好的，所以您只想访问那些具有data-value 属性的rect？ -- jsfiddle.net/mohammadAdil/84YrN/1
是的，没错。但是，您最新的小提琴仍然输出错误的结果。即使 b 没有 value 属性，它也会输出“a b c”