[jQuery] ~로 시작하는 선택자 호출하기

1. 이슈

jQuery를 사용하다 보면 ~로 시작되는 선택자들을 불러올 필요가 생기기도 한다.

이를 알아보고자 한다.

 

2. ~로 시작하는 선택자 호출

<input type="hidden" name="user_file_path" value="" />
<input type="hidden" name="user_file_org_name" value="" />
<input type="hidden" name="user_file_size" value="" />

위와 같은 name값을 가진 input 값들이 있다.

이를 호출하기 위해서 $("input[name=user_file_path]").val() 처럼 해야 한다.

단 이걸 개수만큼 n번 반복하기는 번거롭기 때문에 공통적으로 user로 시작하는 name값을 호출하면 된다.

 

$("input[name^=user]").val();

 

 

이외에도 class, id 값도 동일한 방식으로 호출할 수 있다.

$("[class^='user']").val();
$("[id^='user']").val();

 

~로 시작하는 호출방식 말고도 다양한 호출방식도 존재한다.

 

element [속성^=값]: 특정 값으로 시작하는 객체

element [속성$=값]: 특정 값으로 끝나는 객체

element [속성~=값]: 해당 값이 특정 단어로 시작

element [속성*=값]: 특정 값을 포함하는 문서 객체

 

3. 다른 사용법 예시

<div class="srch">
	<div class="btn" ></div>
	<div class="div_btn" ></div>
</div>
<tr class="btn_tr" ></tr>
<div class="btn excel" ></div>

// btn을 포함하는 클래스 (btn, div_btn, btn_tr, btn excel)
$("[class*='btn']");

// btn을 포함하고, excel을 포함하지 않는 클래스 (btn, div_btn, btn_tr)
$("[class*='btn']";).not("[class*='excel']");

// tr태그에서 btn을 포함하는 클래스 (btn_tr)
$("tr[class*='btn']");

// btn으로 시작하는 클래스 (btn, btn_tr, btn excel)
$("[class^='btn']");

// btn으로 시작하고, srch의 하위 자식이 아닌 클래스 (btn, btn excel)
$("[class^='btn']";).not(".srch *");

 

출처

https://lee-mandu.tistory.com/430

[자바스크립트, 제이쿼리]앞머리, 특정 단어로 시작하는 객체 select

 

https://ggmouse.tistory.com/457

[jQuery] 특정 문자 시작, 포함, 제외하는 class 찾기

잘못된 내용이 있다면 지적부탁드립니다. 방문해주셔서 감사합니다.