구함 : 가변 부분의 jQuery 셀렉터를 중간

Question

에 다음 HTML 고려 :

<div id="Kees_1_test">test 1</div> 
<div id="Kees_12_test">test 2</div> 
<div id="Kees_335_test">test 3</div> 

내가 $('div[id=Kees_{any number}_test]')처럼 div의를 선택하는 선택을하고자합니다. 이것을 어떻게 할 수 있습니까?

^{참고 : ID는 Asp.Net에 의해 생성됩니다.}

Answer 1

이 시도 :

$('div[id^=Kees_][id$=_test]') 

선택이 Kees_로 시작하고 _test로 끝나는 ID를 가진 모든 요소를 ​​선택하는.

단언 할 때, .filter()을 사용하면 가운데 부분에 숫자 만 포함될 수 있습니다. 당신은 위의 예와 .filter()을 결합 할 수 있습니다 :

이수록에 대한 좋은해야

$('div[id^=Kees_][id$=_test]').filter(function() { 
    return /^Kees_\d+_test$/.test(this.id); 
}); 

. 참고로 ^$을 정규식에 추가했는데, Kees_123_test_foo과 같은 ID에도 false를 반환하지만 Kees_123_test은 통과합니다.

Answer 2

가장 좋은 방법은 클래스 선택기를 모든 div의에게 클래스를 제공하고 사용하는 것입니다 :

<div id="Kees_1_test" class="Kees_test">test 1</div> 
<div id="Kees_12_test" class="Kees_test">test 2</div> 
<div id="Kees_335_test" class="Kees_test">test 3</div> 

선택기 :

$('div.Kees_test'); 

이것이 가능하지 않다면, 가장 읽기 쉬운 방법은 것 filter 사용할 수 :

이

$('div[id^="Kees_"]').filter(function() { 
    return /Kees_\d+_test/.test(this.id); 
}); 

\d+ 의미 "를 선택 하나 이상의 숫자 "로 표시됩니다.