jQuery API 정복 - 맞는지 확인하기, is()

.is()

.is( selector )Returns : Boolean

개요 : 인자로 주어진 selector, element, jQuery 객체에 해당하는 것이 하나라도 있으면 'true'를 반환해 줍니다.

.is( selector )
selector 일치하는 요소를 찾기 위해 문자열로 표현된 선택자
.is( function(index) )
function(index) 요소들의 집합을 테스트하기 위한 함수. 이 함수는 하나의 인자인 index를 가지고 이것은 jQuery 집합에서의 인덱스를 뜻함. 이 함수에서 사용되는 this 메소드는 현재 DOM 요소를 가리킴.
.is( jQuery object )
jQuery object 요소 집합에서 일치하는 것을 찾기 위한 jQuery 객체
.is( element )
element 일치하는 요소를 찾기 위한 요소(element)

.is() 함수는 다른 탐색 함수들과는 달리 결과값으로 jQuery 객체를 생성하지 않습니다. 결과는 참/거짓입니다. 이 함수는 이벤트를 제어하는 부분과 같은 곳에 유용하게 사용됩니다.

아래와 같은 마크업을 예로 보겠습니다.

<ul>
  <li>list <strong>item 1</strong></li>
  <li><span>list item 2</span></li>
  <li>list item 3</li>
</ul>

이 마크업에 아래와 같은 스크립트를 적용해 보겠습니다. ul요소안에서 클릭 이벤트가 발생하면 그 이벤트가 발생한 위치가 li에서 발생한 것인지 체크하여 참일 경우 배경색을 빨간색으로 바꿔줍니다.

$("ul").click(function(event) {
  var $target = $(event.target);
  if ( $target.is("li") ) {
    $target.css("background-color", "red");
  }
});

이 예제를 실행해 보시면 li안에 있는 span이나 strong 안에 있는 텍스트를 클릭했을 때는 빨간색으로 변하지 않는 것을 아실 수 있습니다. 함 해보세요. 진짜라니까요. :-)

.is()함수에 위치를 나타내는 선택자나 함수를 사용하실 때는 주의하셔야 합니다. first, :gt(), :even 과 같은 것들은 복수개의 결과를 반환해 주기 때문에 문제가 될 수 있습니다. 즉, jQuery 객체를 반환해주는 선택자나 함수사용은 주의하셔야 한다는 뜻입니다.(완곡한 표현입니다.) 위의 HTML 구조에 $("li:first").is("li:last") 를 사용하면 true가 반환되는 반면 $("li:first-child").is("li:last-child")은 false 를 반환해 줍니다.

함수 사용하기(Using a Function)

is() 함수를 사용하는 다른 방법으로는 인자로 함수를 사용하는 방법이 있습니다. 만약 is()의 인자로 들어있는 함수가 true를 반환한다면 is()함수도 true를 반환합니다. 아래의 마크업을 예로 들어보겠습니다.

<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요소에 클릭 이벤트가 발생했을 때 li안의 strong 요소가 몇개가 있는지 파악하는 함수를 구현해 보려합니다.

$("li").click(function() {
  var $li = $(this);
  var isWithTwo = $li.is(function() {
      return $('strong', this).length === 2;
    });
  if ( isWithTwo ) {
    $li.css("background-color", "green");
  } else {
    $li.css("background-color", "red");
  }
});

위 스크립트가 이해가 되십니까? 결론부터 말씀드리면 각 li를 클릭했을 때 2번째 목록의 바탕색만 녹색이 되고 나머지는 빨간색이 됩니다. 스크립트를 분석해보며 isWithTwo 변수에 strong 태그의 수가 2개인 li인 경우에는 true가 되는 것입니다. 그 아래 구문에서 보면 isWithTwo가 true일때는 바탕색을 green으로 바꾸는 것을 보실 수 있습니다.

예 제
is() 함수와 이벤트 함수를 사용하는 몇가지 방법을 제시합니다.

<!DOCTYPE html>
<html>
<head>
  <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="http://code.jquery.com/jquery-latest.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>

미리보기 [새로고침]

모든 박스들을 클릭해 보세요. 각각 박스별로 메시지가 나옵니다.

예 제
input 요소의 부모 요소가 form 태그이기 때문에 true 를 반환하는 예제입니다.

<!DOCTYPE html>
<html>
<head>
  <style>div { color:red; }</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <form><input type="checkbox" /></form>
<div></div>
<script>
  var isFormParent = $("input[type='checkbox']").parent().is("form");
  $("div").text("isFormParent = " + isFormParent);
</script>

</body>
</html>

미리보기

isFormParent 변수는 true를 가지게 되고 실제로 문자열로 확인하실 수 있습니다.

예 제
input 요소의 부모 요소가 form 태그가 아니고 p태그 이기 때문에 false 를 반환하는 예제입니다.

<!DOCTYPE html>
<html>
<head>
  <style>div { color:red; }</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <form><p><input type="checkbox" /></p></form>
  <div></div>
<script>
  var isFormParent = $("input[type='checkbox']").parent().is("form");
  $("div").text("isFormParent = " + isFormParent);
</script>

</body>
</html>

미리보기

2번째 예제랑 비교해 주기 위한 예제이네요. 잘 보시지 않으면 차이점을 발견하지 못할 수도 있습니다. 틀린그림찾기 보듯 눈 부릅뜨고 집중!! ^^;;

예 제
리스트에서 2의 배수에 해당하는 요소들을 담습니다. li 에 클릭 이벤트가 발생하면 클릭된 요소가 이전에 담은 요소 집합에 해당하면 슬라이드업 효과를 아니라면 바탕색을 빨간색으로 만들어 줍니다.

<!DOCTYPE html>
<html>
<head>
  <style>li { cursor:pointer; }</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  
<ul id="browsers">
  <li>Chrome</li>
  <li>Safari</li>
  <li>Firefox</li>
  <li>Opera</li>
</ul>
<script>
  var $alt = $("#browsers li:nth-child(2n)").css("background", "#00FFFF");
  $('li').click(function() {
    var $li = $(this);
    if ( $li.is( $alt ) ) {
      $li.slideUp();
    } else {
      $li.css("background", "red");
    }
  });
</script>

</body>
</html>

미리보기

다 클릭해 보셨죠? 위 예제 설명과 동일합니다. 소스를 보시면 2의 배수에 해당되는 리스트 요소가 $alt 라는 jQuery 객체 변수에 담겨 있습니다. 그 아래 li 의 클릭 이벤트가 발생했을 때 이 $alt 객체 변수를 다시 활용하는 것을 보실 수 있습니다. 이때 사용한 함수가 is() 입니다. 재밌고도 왠지 활용성이 있어보이는 예제네요.

예 제
이번 예제는 위의 예제의 다른 버젼입니다. 잘 비교해 보시기 바랍니다.

<!DOCTYPE html>
<html>
<head>
  <style>li { cursor:pointer; }</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  
<ul id="browsers">
  <li>Chrome</li>
  <li>Safari</li>
  <li>Firefox</li>
  <li>Opera</li>
</ul>
<script>
  var $alt = $("#browsers li:nth-child(2n)").css("background", "#00FFFF");
  $('li').click(function() {
    if ( $alt.is( this ) ) {
      $(this).slideUp();
    } else {
      $(this).css("background", "red");
    }
  });
</script>

</body>
</html>

미리보기

기법의 차이이긴 합니다만 이번 예제는 경험하지 않으면 언뜻 떠오르지 않겠네요. 이런 기법들이 코드의 양을 줄여주게 됩니다. 자바스크립트는 코드 양도 퍼포먼스에 영향을 주게 되니 알아둬서 나쁠건 없겠네요.

아주 짧은 함수명이지만 아주 유용한 함수입니다. 까먹지 마시고 잘 활용해 보시기 바랍니다.

그럼 즐프하세요.

※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.

저작자표시 비영리 변경금지

'프로그래밍 > jQuery' 카테고리의 다른 글

jQuery API 정복 - 현재 요소의 다음 요소 모두, nextAll() (0)	2011.06.21
jQuery API 정복 - 현재 요소의 바로 다음 요소, next() (2)	2011.06.09
jQuery API 정복 - 결과를 배열로 돌려받기, map() (7)	2011.06.08
jQuery API 정복 - 마지막 요소 찾기, last() (0)	2011.05.31
jQuery API 정복 - 가지고 있나 없나? has() (2)	2011.05.25
jQuery API 정복 - 첫번째 요소 찾기, first() (2)	2011.05.24
jQuery API 정복 - 하위 요소 전부 찾기, find() (2)	2011.05.19
jQuery API 정복 - 선택 요소 집합에서 추출하기, filter() (8)	2011.05.12

즐거움을 찾자 Find Fun!!

jQuery API 정복 - 맞는지 확인하기, is()

'프로그래밍 > jQuery' 카테고리의 다른 글

티스토리툴바

jQuery API 정복 - 맞는지 확인하기, is()

'프로그래밍 > jQuery' 카테고리의 다른 글

관련글

티스토리툴바