[jQuery] jQuery 표현식, selector 확장 검색 (like 검색)

안녕하세요🐱‍🐉

오늘은 jQuery Extensions 중 selector 접근 시 id나 name이 여러 개이거나, 유동적일 때 유용한 방법에 대해 정리해보려고 해요. 선택자를 확장하여 query의 like처럼 사용하는 방법입니다.

(여러 개의 name을 가진 경우, id 뒷부분에 key 값을 붙이는 경우)

 

.each와 함께 자주 사용돼요.

$("input[id^='enchovy']").each(function(index, item){ }

 

---

이름이나 아이디을 특정 값과 비교하는 경우 바로 아래처럼 사용하는데 그 외에도 다양한 기능의 선택자를 사용할 수 있어요.

 

Attribute Equals Selector

[name="value"]
특정 값과 정확히 동일한 값을 가진 지정된 속성을 가진 요소를 선택합니다.

 

Attribute Not Equal Selector

[name!="value"]
지정된 속성이 없거나 지정된 속성이 있지만 특정 값이 없는 요소를 선택합니다.

 

Attribute Contains Prefix Selector

[name|="value"]
지정한 Atribute의 값이 지정된 문자열과 같거나 해당 문자열 뒤에 하이픈(-)이 이어지는 요소를 선택합니다.

 

Attribute Contains Selector

[name*="value"]
지정된 문자열이 포함된 값을 가진 지정된 속성을 가진 요소를 선택합니다.

(쿼리문에서 ~ like '%value%')

 

Attribute Contains Word Selector

[name~="value"]
공백으로 구분된 지정된 단어를 포함하는 값을 가진 지정된 속성을 가진 요소를 선택합니다.

 

Attribute Starts With Selector

[name^="value"]
지정된 문자열로 시작하는 값을 가진 지정된 속성을 가진 요소를 선택합니다.

(쿼리문에서 ~ like 'value%')

 

Attribute Ends With Selector

[name$="value"]
지정된 문자열로 정확히 끝나는 값을 가진 지정된 속성을 가진 요소를 선택합니다. 비교는 대소문자를 구분합니다.

(쿼리문에서 ~ like '%value')

 

 

 

 

 

 

 

 

ref. https://api.jquery.com/category/selectors/attribute-selectors/