2013-01-03 2 views
3

참고 DOM 요소 선택이에 의해 쿼리에 대한 기본적인 질문하지jQuery를가 여러 식별자와 데이터 속성에 의해

데이터 속성 제가하는 데 문제는 내가 좋아하는 특정 요소를 가지고있다 그래서 :

<div data-step="1, 4"> 

나는 등

하자의 각 [data-step] 통해 단계와 1, 4을 추출하여 이벤트를 만드는 방법을 알아 낸 바깥 나는 쿼리이 정확한 데이터 단계를 잡기 위해 노력하고있어하지만 주어진있어 모든입니다 : 4

$('[data-step="4"]') 
// this won't work of course 

$('[data-step="1, 4"]') 
// obviously this will work, but at this point I'm only given the index 
// which will only be ONE of these numbers 

가 기본적으로 제공 (예를 위해, 4) 어떻게 쉽게 알아 갈 수있는 선택을 조회 할 수 있습니다 잡아 [data-step="1, 4"]?

전 루프가 있습니다. 각 데이터 단계를 거치며 모든 것을 제거하고 일치하는 부분이 있는지 확인합니다. 잠재적 인 쉬운 방법 있는가?

+4

공백으로 구분 된 데이터 단계 특성을 변경할 수 있으면 $ ("[data-step ~ ='4 ']')를 사용할 수 있습니다. – ajshort

+0

@ajshort 가장 간단한 해결책이 여기 있습니다! 다행히도 저는 이것을 바꿀 수 있습니다. 이렇게 쉽게 처리 할 수 ​​있습니다. 환호 –

답변

4

~=은 공백으로 구분 된 주어진 단어를 포함하는 값을 갖는 속성을 가진 요소를 찾습니다. 귀하의 경우에도 작동합니다.

$('[data-step~="4"]') 

*=에는 지정된 하위 문자열을 포함하는 값을 갖는 요소가 있습니다.

$('[data-step*="4"]') 
+0

와우 어떻게'~ ='에 대해 몰랐어! 속성에는 단어 선택기가 포함되어 있습니다. 매우 좋습니다. 이것은 완벽하게 작동합니다! 그리고'~ = 4' 만하고있는 경우에 놀랍게도'[data-step = 14]'같은 것을 선택하지 않습니다. 정말 고마워! –

+0

제공된 선택자는'data-step = "1, 4, 5"'및'data-step = "1, 44"'와 같은 속성에서는 작동하지 않는다는 것을 아는 것이 중요합니다. – VisioN

+0

@VisioN :'* ='는'data-step = "1, 4, 5"'에 대해 작동하고, '44'는 OP가 올바르게 이해할 경우 OP가 찾고자하는 것이 아닙니다. –

2

또한 filter 솔루션을 사용할 수있다 : '값' $ 하위 문자열이 포함

당신은 * 전에 사용할 필요가
var search = 4; 
$("[data-step]").filter(function() { 
    return $.inArray("" + search, $(this).data("step").split(/,\s*/)) !== -1; 
}); 
+0

아주 좋습니다! 어떤 이유로 나는'Uncaught TypeError : Object 1은'.attr ('data-step')'으로 바꿀 때까지 'split'메소드가 없다. 그러나 이것은 완벽하게 작동합니다! –

+0

@mcpDESIGNS 이전 버전의 jQuery =) – VisioN

+0

'1.7.2' 그래 : 그래도 곧 업그레이드 될 것 같습니다! –

0

는 =이 모든 데이터 단계 느릅 나무를 반환한다 ('[데이터 단계 * = "value"] ')

관련 문제