여러가지의 다양한 요소를 한번에 선택하고 싶을 때 구성할 수 있는 방법입니다. 여러 선택자를 콤마로 연결하면 됩니다.
원문 링크 
http://api.jquery.com/multiple-selector/
- jQuery('selector1, selector2, selectorN')
- selector1 유효한 선택자
- selector2 또 다른 유효한 선택자
- selectorN N개 만큼의 유효한 선택자
여러 선택자를 묶어서 사용하여 단 하나의 결과를 나타낼 수 있습니다. 이런 다중 표현 방식은 확실히 다른 요소들을 찾는 효과적인 방법이 됩니다. 이 결합(combinator) 선택자와 동일한 효과를 내는 .add() 함수가 있습니다.
예 제
div, span, p 이면서 myClass 라는 클래스 명을 가진, 이 세가지 복합 선택자와 일치하는 요소들을 모두 찾습니다.
<!DOCTYPE html>
<html>
<head>
<style>
div,span,p {
width: 126px;
height: 60px;
float:left;
padding: 3px;
margin: 2px;
background-color: #EEEEEE;
font-size:14px;
}
</style>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
<div>div</div>
<p class="myClass">p class="myClass"</p>
<p class="notMyClass">p class="notMyClass"</p>
<span>span</span>
<script>$("div,span,p.myClass").css("border","3px solid red");</script>
</body>
</html>
미리보기
예 제
div, p, span 태그를 찾습니다. 찾은 요소들의 태그 이름을 추출하여 콤마(",")로 연결한 문자열을 문서에 추가합니다.
<!DOCTYPE html>
<html>
<head>
<style>
b { color:red; font-size:16px; display:block; clear:left; }
div,span,p { width: 40px; height: 40px; float:left;
margin: 10px; background-color: blue;
padding:3px; color:white;
}
</style>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
<span>span</span>
<p>p</p>
<p>p</p>
<div>div</div>
<span>span</span>
<p>p</p>
<div>div</div>
<b></b>
<script>
var list = $("div,p,span").map(function () {
return this.tagName;
}).get().join(", ");
$("b").append(document.createTextNode(list));
</script>
</body>
</html>미리보기
와우!! 위의 예제는 상당히 복잡해 보입니다. map(), get(), join() 이란 함수들이 연속적으로 사용되었습니다. 이 함수들의 사용법을 따로 설명드리지 않겠습니다. 나중에 나오겠죠?? ^^;; 한번씩들 찾아보시기 바랍니다.
이 선택 방법은 아주 유용해 보입니다만 사실 이런 식으로 여러 요소를 한번에 선택할 일이 그리 많지는 않을 것 같습니다. 그래도 이런 방식으로 선택할 수 있다는 걸 모르는 것 보다는 낫겠죠.
그럼 즐프하세요.
※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| jQuery API 정복 - n번째 자식요소 찾기 : nth-child (5) | 2011.02.16 |
|---|---|
| jQuery API 정복 - ~이 아닌 요소 선택하기 : not (3) | 2011.02.16 |
| jQuery API 정복 - 다음 형제 요소 찾기 : next ~ siblings (6) | 2011.02.15 |
| jQuery API 정복 - 다음 요소 선택하기 : prev + next (5) | 2011.02.14 |
| jQuery API 정복 - 다중 속성 필터를 이용한 요소 선택 : Mutiple Attribute Selector (2) | 2011.02.12 |
| jQuery API 정복 - 마지막 자식 요소 찾기 : last (2) | 2011.02.12 |
| jQuery API 정복 - 마지막 자식 요소들 찾기 : last-child (2) | 2011.02.11 |
| jQuery API 정복 - 폼에 속한 input 들 선택하기 : jQuery(':input') (0) | 2011.02.11 |