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/기타

번호 제목 글쓴이 날짜 조회수
47 스마트에디터 반응형 CSS 추가 관리자 12-13 33
46 JS 글자수 체크(공백포함, 제외) 및 언어 옵션 설정 관리자 09-02 2,910
45 web chart - 실시간 차트 관리자 07-25 2,880
44 비동기 프로그래밍 관리자 07-25 2,829
43 table thead 고정과 tbody 스크롤 관리자 07-23 2,888
42 datepicker 사용하여 공휴일 직접 지정하기 관리자 06-11 2,943
41 Dropzone - 이미지 & 파일 업로드 (드래그 앤 드롭) 라이브러리 관리자 03-06 3,111
40 JSPDF 사용법(Javascript pdf) 관리자 03-04 3,454
39 FullCalendar(풀캘린더) 어거지 사용법 관리자 01-25 3,296
38 JQUERY - id가 여러개인데 한번에 찾고 싶을때! ${} 관리자 12-28 3,123
37 [CSS] 가로 스크롤 구현하기 관리자 12-27 3,280
36 JCROP을 이용한 업로드한 크롭( CROP ) 하기 관리자 12-27 3,245
35 제이쿼리 - 모달 다이아로그 및 여러 알림창들 관리자 12-21 2,948
34 Javascript/jQuery 이미지 회전 돋보기 관리자 11-07 3,349
33 Resolving the Issue of Fakepath in JavaScript 관리자 10-26 2,996
32 div 및 요소 화면 중앙에 위치시키기 관리자 10-21 3,016
31 [Jquery] 체크박스 전체 체크 , 해제 하는 방법 관리자 10-19 3,052
30 display 스타일 속성 사용하여 행 숨기기/보이기 관리자 09-16 3,436
29 자주 사용하는 비주얼 스튜디오 코드(Visual Studio Code, VSC, vscode) 단축키 정리 관리자 09-14 3,559
28 div 2개 나란히 정렬하는 방법 관리자 09-09 3,241