테스트 사이트 - 개발 중인 베타 버전입니다
SIR

.is()

수다왕
프로필 보기이 회원 글보기
 · 8년 전 · 1455

.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>&nbsp;</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>

목록
이전글 다음글

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시글 목록

번호 제목
15969
jQuery .jquery
15968
JavaScript 공휴일을 제외한 시간적용 ON/OFF 스크립트예제 (휴일추가가능)
15967
jQuery .is() 현재글
15966
jQuery .insertBefore()
15965
jQuery .insertAfter()
15964
jQuery .innerWidth ()
15963
jQuery .innerHeight ()
15962
jQuery .index()
15961
jQuery jQuery( ":image" )
15960
jQuery jQuery ( "# id")
15959
jQuery .html()
15958
jQuery .hover (handlerIn, handlerOut)
15957
jQuery .hide ()
15956
jQuery jQuery ( ": hidden")
15955
기타 그누보드5 기본쿼리
15954
jQuery .height()
15953
jQuery jQuery ( ": header")
15952
jQuery .hasClass( className )
15949
PHP 네이버 클로버 tts 3
15947
node.js 네이트온 팀룸으로 메일 수신 확인 1
15946
jQuery jQuery ( ": has (selector)")
15945
jQuery attributeHas 선택자
15944
jQuery .has (selector)
15942
jQuery .get (index)
15941
jQuery .focusin (handler)
15940
jQuery .focusin (handler)
15939
jQuery jQuery ( ": focus")
15938
jQuery .focus (handler)
15937
jQuery jQuery( ":first" )
15936
jQuery jQuery ( ": first-of-type")
이전 다음
전체 목록