JQUERY - id가 여러개인데 한번에 찾고 싶을때! ${}

$(Selector[attr]) 


value 동일한 개체 선택 $(Selector[attr="value"])


value와 불일치 하는 개체 선택 $(Selector[attr!="value"])


value로 시작하는 개체 선택 $(Selector[attr^="value"])


value 로 끝나는 값 선택 $(Selector[attr$="value"])


value가 포함하는 값 선택 $(Selector[attr*="value"])


value가 포함하는 값 선택 $(Selector[attr~="value"])


예)

$("input[id^='chk_mileage']") <- 태그가 input태그이고 id값이 chk_mileage으로 시작하는 개체 선택!

 
$("[id^='orgList_']")


전체 선택자 ${"*"} 모든 요소
아이디 선택자 ${"#아이디"} 해당 아이디를 가지고 있는 요소
클래스 선택자 ${".클래스"} 해당 클래스를 가지고 있는 요소들
요소 선택자 ${"요소"} 지정 요소명을 가지고 있는 요소들
그룹 선택자 ${"선택1,선택2,선택3..."} 선택1,선택2,선택3...으로 지정된 요소들

 

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>attributeContains demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<input name="apple">
<input name="pineapple">
<input name="applemango">
<input name="watermelon">
 
<script>
$( "input[name*='man']" ).val( "has man in it!" );
</script>
 
</body>
</html>

그런데 만약 아이디가 위와 같이 되어 있을때 apple이라는 단어가 들어간 요소들을 한번에 선택하고 싶을때 어떻게 해야할까?

 

id 뿐만 아니라 위에 적혀있는 선택자들 모두 사용이 가능하니 아래의 표를 참고하여 사용하자!

문법 {id[수식]내용} 내용
$( "input[name='man']" ) 해당 내용의 요소 선택
$( "input[name!='man']" ) 해당 내용이 아닌 요소 선택
$( "input[name^='man']" ) 해당 내용으로 시작하는 요소 선택
$( "input[name$='man']" ) 해당 내용으로 끝나는 요소 선택
$( "input[name*='man']" ) 해당 내용을 포함하는 요소 선택
$( "input[name~='man']" ) 해당 내용을 포함하지 않는 요소 선택

 

0
0
이 글을 페이스북으로 퍼가기 이 글을 트위터로 퍼가기 이 글을 카카오스토리로 퍼가기 이 글을 밴드로 퍼가기

HTML/CSS/기타

번호 제목 글쓴이 날짜 조회수
39 FullCalendar(풀캘린더) 어거지 사용법 관리자 01-25 80
38 JQUERY - id가 여러개인데 한번에 찾고 싶을때! ${} 관리자 12-28 88
37 [CSS] 가로 스크롤 구현하기 관리자 12-27 192
36 JCROP을 이용한 업로드한 크롭( CROP ) 하기 관리자 12-27 97
35 제이쿼리 - 모달 다이아로그 및 여러 알림창들 관리자 12-21 76
34 Javascript/jQuery 이미지 회전 돋보기 관리자 11-07 137
33 Resolving the Issue of Fakepath in JavaScript 관리자 10-26 106
32 div 및 요소 화면 중앙에 위치시키기 관리자 10-21 140
31 [Jquery] 체크박스 전체 체크 , 해제 하는 방법 관리자 10-19 131
30 display 스타일 속성 사용하여 행 숨기기/보이기 관리자 09-16 160
29 자주 사용하는 비주얼 스튜디오 코드(Visual Studio Code, VSC, vscode) 단축키 정리 관리자 09-14 385
28 div 2개 나란히 정렬하는 방법 관리자 09-09 163
27 HTML, CSS - 헤더컬럼 고정형 table 구성하기 관리자 09-06 139
26 Drag and Drop File Upload 관리자 09-03 136
25 rowspan으로 합친 table에서 룰오버 관리자 08-23 175
24 스마트에디터 입력 용량 체크 관리자 07-06 245
23 자바스크립트 정규표현식 모음 관리자 07-03 205
22 [Javascript] 쓰레드(웹 워커-Web worker)를 사용하는 방법 관리자 04-13 254
21 구글 차트 관리자 04-12 499
20 Camera API 관리자 04-07 269