크롬에 사용자 정의 속성이있는 jQuery 및 SVG

jQuery로 액세스하려는 웹 페이지에 SVG 요소가 있습니다. SVG 요소에는 몇 가지 사용자 지정 데이터 특성이 첨부되어 있으며이를 jQuery 선택기에서 사용하여 올바른 요소를 얻고 싶습니다. 내 문제는 IE9 및 Firefox에서 작동하는 동안 사용자 지정 특성 선택기가 Chrome에서 작동하지 않는다는 것입니다. 다음은 SVG 요소의 예입니다크롬에 사용자 정의 속성이있는 jQuery 및 SVG

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

는 그리고 이것은 내가 설정 한 사용자 정의 속성을 가진 모든 요소 얻을 때 사용하는 자바 스크립트입니다 :

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

그래서 문이 0을 반환 무슨 일하는 것을를 요소는 Firefox 및 IE에서 모든 X 요소를 반환하지만 Chrome에서는 그러나 선택기에서 "표준"속성을 사용하면 모든 브라우저에서 작동하는 것처럼 보입니다. 이 문장은 예를 들어 모든 브라우저에서 제대로 모든 요소를 반환 :

$('rect[width]');

누군가는 이런 일이 이유를 설명하십시오 수 있고, 내가 사용자 정의가 jQuery를 선택기에서 SVG 요소에 속성을 사용 할 수있는? SVG 요소에는 대신 사용할 수있는 ID 또는 클래스가 없으므로 사용자 지정 데이터 특성을 사용합니다.

참고 :이 특별한 경우의 SVG 요소는 HighCharts 자바 스크립트 라이브러리에 의해 생성되지만, 중요하지 않아야합니다. 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 버전이 필요합니까? –

이 작업을 참조하십시오 - 방금 데이터 속성 이름을 변경했습니다 - http://jsfiddle.net/mohammadAdil/RFtgD/ –

이것이 정확히 내가 생각하는 것 같지 않습니다. http://jsfiddle.net/84YrN/ 여기서 jQuery 요소 a와 c 만 가져야합니다 (b에는 데이터 값 특성이 없으므로). 그러나 세 개의 직사각형 모두를 기록합니다. –

크롬에 사용자 정의 속성이있는 jQuery 및 SVG

답변

관련 문제