반응형
정규식을 사용하여 jQuery로 ID로 요소를 어떻게 선택할 수 있습니까?
다음 입력 요소가 있습니다.
<input id="AAA_RandomString_BBB" type="text" />
<input id="AAA_RandomString_BBB_Start" type="text" />
<input id="AAA_RandomString_BBB_End" type="text" />
AAA & BBB는 상수이며 나는 항상 그들이 무엇인지 알 것입니다. 그러나 RandomString은 항상 무작위입니다.
AAA_RandomString_BBB의 값을 얻고 싶습니다. ID가 _Start 또는 _End로 끝나는 입력 요소의 값을 원하지 않습니다.
나는 다음을 시도했다.
$('[id^="AAA_"]')
그러나 위는 "AAA_"로 시작하는 ID가있는 모든 입력 요소를 선택합니다.
다음과 같은 정규식 유형 구문을 사용하여 선택하는 방법이 필요합니다.
$('[id^="AAA_(.+?)_BBB"]')
이것이 가능한가? 그렇지 않은 경우 누구나 선택 방법을 제안 할 수 있습니까?
여러 속성 선택기 에서 두 선택기를 결합 할 수 있습니다 .
$("[id^=AAA_][id$=_BBB]")
지정된 모든 속성 필터와 일치하는 모든 요소를 반환합니다.
[id^=AAA_]로id시작 하는 속성이있는 요소와 일치AAA_하며[id$=_BBB]으로id끝나는 속성을 가진 요소와 일치합니다_BBB.
또 다른 일반적인 대안 :
- 사용하여 사용자의
:regex()선택을 , - 사용
.filter()기반 접근 방식을 .
이것을 사용하십시오 :
$('[id^="AAA_"][id$="_BBB"]')
바이올린 : http://jsfiddle.net/J6hGx/
다음 AAA과 BBB같이 시작 하고 끝나는 id를 찾을 수 있습니다 .
$("[id^=AAA_][id$=_BBB]")
작동하는 바이올린 : http://jsfiddle.net/DN9uV/
다음과 같이 할 수 있습니다.
$('input').filter(function(){ return this.id.match(/^AAA_.+_BBB$/) })
$('input', <context>)보다 정확한 검색을 위해 사용할 수 있습니다 . 여기도 참조
고유 할 필요가없는 클래스 선택기로이 문제를 해결하는 데 사용합니다.
이것은 또한 복잡한 검색이 필요하지 않기 때문에 속도에 긍정적 인 영향을 미칩니다. 또한 다른 요소의 다양한 스타일링에 사용할 수 있습니다.
예 :
<elem id="1" class="aa">element type aa</elem>
<elem id="2" class="aa">element type aa</elem>
<elem id="3" class="aa bb">element type aa and bb</elem>
<elem id="4" class="bb">element type bb</elem>
이제 단순히 클래스 선택기를 사용할 수 있습니다.
$('.aa').click(function(){
console.log( 'clicked type aa #' + $(this).attr('id') );
});
$('.bb').click(function(){
console.log( 'clicked type bb #' + $(this).attr('id') );
});
_BBB로 끝나는 ID를 확인하는 것이 좋습니다.
$("[id$=_BBB]")
이것은 어떤가요 :
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
</head>
<body>
<input id="AAA_RandomString_BBB" type="text" />
<input id="AAA_RandomString_BBB_Start" type="text" />
<input id="AAA_RandomString_BBB_End" type="text" />
<script>
$(document).ready(function () {
debugger
var targetElement = $('input')
.filter(function () {
var el = this.id.match(/^AAA.*BBB$/g);
return el;
});
console.log(targetElement.val());
})
</script>
</body>
</html>
반응형
'IT story' 카테고리의 다른 글
| 모든 DataGrid 행 및 셀 테두리 제거 (0) | 2020.12.28 |
|---|---|
| 페이지가 전체 화면을 종료 할 때 감지하는 방법은 무엇입니까? (0) | 2020.12.28 |
| 부적절한 광고 식별자 [IDFA] 사용 (0) | 2020.12.28 |
| 로컬 파일에서 React JS로 json 데이터로드 (0) | 2020.12.28 |
| Crashlytics : "비정상 종료를 처리 할 dSYM이 없습니다." (0) | 2020.12.28 |