.is() 정보
jQuery .is()본문
.is()
설명 : selector, element 또는 jQuery 객체에 대해 현재 일치하는 요소 집합을 검사하고 true이러한 요소 중 하나 이상이 주어진 인수와 일치하는 경우 이를 반환 합니다.
다른 필터링 메서드와 달리 .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" );
}
});
이제 사용자가 첫 번째 항목 또는 세 번째 항목의 "목록"이라는 단어를 클릭하면 클릭 한 목록 항목에 빨간색 배경이 표시됩니다. 그러나 사용자가 첫 번째 항목에서 항목 1을 클릭하거나 두 번째 항목에서 항목 1을 클릭하면 아무 것도 발생하지 않습니다. 이러한 경우 이벤트의 대상은 <strong>또는 <span>각각 이기 때문입니다 .
같은 위치 선택기와 선택기 문자열에서 jQuery를 1.7에 앞서 :first, :gt()또는 :even, 상기 위치 필터링에 전달 jQuery 오브젝트에 대해 수행되고 .is(), 하지 포함하는 문서에 대해. 그래서 위에 표시된 HTML의 경우 $( "li:first" ).is( "li:last" )return 과 같은 표현식이 반환 true되지만 $( "li:first-child" ).is( "li:last-child" )반환 false됩니다. 또한 Sizzle의 버그로 인해 많은 위치 선택기가 제대로 작동하지 않았습니다. 이 두 가지 요소는 필터에서 위치 선택기를 거의 사용할 수 없게 만들었습니다.
jQuery 1.7부터는 위치 선택기가있는 선택기 문자열이 문서에 대해 선택기를 적용한 다음 현재 jQuery 세트의 첫 번째 요소가 결과 요소 중 하나와 일치하는지 여부를 결정합니다. 그래서 위의 HTML은 $( "li:first" ).is( "li:last" )리턴 과 같은 표현식 false입니다. 위치 선택기는 W3C 표준이 아닌 jQuery 추가이므로 가능한 경우 W3C 선택기를 사용하는 것이 좋습니다.
함수 사용하기
이 메서드의 두 번째 형식은 선택기가 아닌 함수를 기반으로 요소와 관련된 식을 계산합니다. 각 요소에 대해 함수가 반환 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 tags</span></li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
클릭 처리기를 클릭하면 그 시간에 클릭 한 요소 <li>의 수를 평가하는 모든 사용자에게 클릭 핸들러를 연결할 수 있습니다 .<strong><li>
$( "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" );
}
});
예 :
이벤트 처리기 내에서 is ()를 사용할 수있는 몇 가지 방법을 보여줍니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>is demo</title>
<style>
div {
width: 60px;
height: 60px;
margin: 5px;
float: left;
border: 4px outset;
background: green;
text-align: center;
font-weight: bolder;
cursor: pointer;
}
.blue {
background: blue;
}
.red {
background: red;
}
span {
color: white;
font-size: 16px;
}
p {
color: red;
font-weight: bolder;
background: yellow;
margin: 3px;
clear: left;
display: none;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div></div>
<div class="blue"></div>
<div></div>
<div class="red"></div>
<div><br/><span>Peter</span></div>
<div class="blue"></div>
<p> </p>
<script>
$( "div" ).one( "click", function() {
if ( $( this ).is( ":first-child" ) ) {
$( "p" ).text( "It's the first div." );
} else if ( $( this ).is( ".blue,.red" ) ) {
$( "p" ).text( "It's a blue or red div." );
} else if ( $( this ).is( ":contains('Peter')" ) ) {
$( "p" ).text( "It's Peter!" );
} else {
$( "p" ).html( "It's nothing <em>special</em>." );
}
$( "p" ).hide().slideDown( "slow" );
$( this ).css({
"border-style": "inset",
cursor: "default"
});
});
</script>
</body>
</html>
0
댓글 0개