在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自定義屬性

回答

相關問題