jQuery 순회 - is() 메서드
예제
false를 반환합니다. input 요소의 부모는 p 요소입니다:
var isFormParent = $("input[type='checkbox']").parent();.is("form");
$("div").text("isFormParent = " + isFormParent);
정의와 사용법
is()는 선택자, 요소 또는 jQuery 객체를 기반으로 일치하는 요소 집합을 검사하며, 이 요소 중 하나라도 지정된 매개변수와 일치하면 true를 반환합니다.
문법
.is(selector)
| 파라미터 | 설명 |
|---|---|
| selector | 문자열 값, 일치하는 요소의 선택자 표현식을 포함합니다. |
상세 설명
다른 필터 메서드와 달리, .is()는 새로운 jQuery 객체를 생성하지 않습니다. 대신, jQuery 객체의 내용을 변경하지 않고 검사할 수 있게 합니다. 이는 콜백 내에서 일반적으로 유용합니다, 예를 들어 이벤트 처리기.
제정보에 따르면, 우리는 두 개의 항목이 서브 요소를 포함하는 목록을 가지고 있습니다:
<ul> <li>list <strong>item 1</strong></li> <li><span>list item 2</span></li> <li>list item 3</li> </ul>
당신은 <ul> 요소에 클릭 처리기를 추가하고, 코드를 목록 항목 자체가 아닌 서브 요소가 클릭될 때만 트리거하는 것으로 제한할 수 있습니다:
$("ul").click(function(event) {
var $target = $(event.target);
if ( $target.is("li") ) {
$target.css("background-color", "red");
}
);
현재, 사용자가 첫 번째 목록 항목의 단어 "list" 또는 세 번째 목록 항목의 어떤 단어를 클릭하면, 클릭된 목록 항목은 빨간 배경색으로 설정됩니다. 그러나 사용자가 첫 번째 목록 항목의 item 1 또는 두 번째 목록 항목의 어떤 단어를 클릭하면 아무 변화도 없습니다. 이는 이 상황에서 이벤트의 대상이 <strong>는 <span>라는 것 때문입니다.
주의하시오, 위치 선택자를 포함한 선택자 표현식 문자열, 예를 들어 :first, :gt() 또는 :even에서 위치 필터는 .is()에 전달된 jQuery 객체에 대해, 문서에 대해 적용되지 않습니다. 따라서 위의 HTML에 대해 $("li:first").is("li:last")와 같은 표현식은 true를 반환하지만 $("li:first-child").is("li:last-child")는 false를 반환합니다。
함수 사용
이 메서드의 두 번째 사용법은 함수 대신 선택자를 기반으로 한 관련 요소 표현식을 계산하는 것입니다. 각 요소에 대해 함수가 true를 반환하면 .is()도 true를 반환합니다. 예를 들어, 아래는 조금 더 복잡한 HTML 단편입니다：
<ul>
<li><strong>list</strong> item 1 - one strong tag</li>
<li><strong>list</strong> item <strong>2</strong> -
two <span>strong 태그</span></li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
당신은 각 <li>에 click 처리기를 추가하여 클릭된 <li> 내부의 <strong> 요소의 수를 계산할 수 있습니다：
$("li").click(function() {
var $li = $(this),
isWithTwo = $li.is(function() {
return $('strong', this).length === 2;
};
if ( isWithTwo ) {
$li.css("background-color", "green");
} else {
$li.css("background-color", "red");
}
);
