티스토리 뷰

jQuery

[jQuery] .is()

.is()

선택한 요소에서 주어진 선택자가 있는지 판별합니다.


.is()

선택한 요소에서 주어진 선택자가 있는지 판별합니다.

문법(Syntax)

$("선택자").is("선택자");
$("선택자").is("변수");
$("선택자").is("함수");

정의(Definition)

  • 선택한 요소에서 주어진 선택자가 있는지 판별하여 있으며 true를 반환합니다.

샘플(Sample)

선택한 요소 중에 원하는 선택자가 있으면 활성화합니다.

Sample1

탐색(Traversing)

  • .eq() 메서드는 선택한 요소에 인덱스 번호에 해당하는 요소를 찾습니다.
  • .filter() 메서드는 선택된 요소에서 선택하거나 함수를 사용할 수 있습니다.
  • .first() 메서드는 선택된 요소에서 첫번째 자식 요소를 찾습니다.
  • .has() 메서드는 선택된 요소의 자식 요소에서 주어진 선택자를 찾습니다.
  • .is() 메서드는 선택된 요소 객체의 특징을 판별합니다.
  • .last() 메서드는 선택된 요소에서 마지막 번째 자식 요소를 찾습니다.
jquery
$(".choice1 .btn1").on("click", function(e){
    if ( $(".list1 li").is("li") ){
        $(".list1 li").addClass("rLine");
    }
});
$(".choice1 .btn2").on("click", function(e){
    if ( $(".list1 li span").is("span") ){
        $(".list1 li span").parent().addClass("rLine");
    }
});
html
<h3>탐색(Traversing)</h3>
<div class="list1">
    <ul>
        <li>.eq() 메서드는 선택한 요소에 인덱스 번호에 해당하는 요소를 찾습니다.</li>
        <li>.filter() 메서드는 선택된 요소에서 선택하거나 함수를 사용할 수 있습니다.</li>
        <li>.first() 메서드는 선택된 <span class="span">요소</span>에서 첫번째 자식 요소를 찾습니다.</li>
        <li>.has() 메서드는 선택된 요소의 자식 요소에서 주어진 선택자를 찾습니다.</li>
        <li>.is() 메서드는 선택된 <span class="span">요소</span> 객체의 특징을 판별합니다.</li>
        <li>.last() 메서드는 선택된 요소에서 마지막 번째 자식 요소를 찾습니다.</li>
    </ul>
</div>
Total
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Sample</title>
    <style>
        .span:before {content:'span'; padding: 4px 4px 2px 4px; font-size: 90%; color: #3d90b7; white-space: nowrap; background-color: #e7f6fd; border-radius: 4px;border: 1px dashed #3d90b7;}
        .rLine {padding: 4px 4px 2px 10px; font-size: 90%; color: #c7254e; white-space: nowrap; background-color: #f9f2f4; border-radius: 4px; border: 1px dashed #a51a3d;}
        a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block; border-radius: 20px; text-decoration: none;}
    </style>
</head>
<body>
    
    <h3>탐색(Traversing)</h3>
    <div class="list1">
        <ul>
            <li>.eq() 메서드는 선택한 요소에 인덱스 번호에 해당하는 요소를 찾습니다.</li>
            <li>.filter() 메서드는 선택된 요소에서 선택하거나 함수를 사용할 수 있습니다.</li>
            <li>.first() 메서드는 선택된 <span class="span">요소</span>에서 첫번째 자식 요소를 찾습니다.</li>
            <li>.has() 메서드는 선택된 요소의 자식 요소에서 주어진 선택자를 찾습니다.</li>
            <li>.is() 메서드는 선택된 <span class="span">요소</span> 객체의 특징을 판별합니다.</li>
            <li>.last() 메서드는 선택된 요소에서 마지막 번째 자식 요소를 찾습니다.</li>
        </ul>
    </div>
    
    <div class="choice1">
        <a href="#" class="off1">리셋</a>
        <a href="#" class="btn1">클릭하면 <em>.is("li")</em>가 있으면 활성화됩니다.</a>
        <a href="#" class="btn2">클릭하면 <em>.is("span")</em>가 있으면 활성화됩니다.</a>
    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        $(".choice1 .off1").on("click", function(e){
            e.preventDefault();
            $(".list1 li").removeClass("rLine");
        });
        $(".choice1 .btn1").on("click", function(e){
            e.preventDefault();
            if ( $(".list1 li").is("li") ){
                $(".list1 li").addClass("rLine");
            }
        });
        $(".choice1 .btn2").on("click", function(e){
            e.preventDefault();
            if ( $(".list1 li span").is("span") ){
                $(".list1 li span").parent().addClass("rLine");
            }
        });
    </script>

</body>
</html>

샘플(Sample)

리스트를 클릭하여 strong 태그가 두개 있으면 파란색, 하나 있으면 붉은색으로 표현됩니다.

Sample2

탐색(Traversing)

  • .eq() 메서드는 선택한 요소에 인덱스 번호에 해당하는 요소를 찾습니다.
  • .filter() 메서드는 선택된 요소에서 선택하거나 함수를 사용할 수 있습니다.
  • .first() 메서드는 선택된 요소에서 첫번째 자식 요소를 찾습니다.
  • .has() 메서드는 선택된 요소의 자식 요소에서 주어진 선택자를 찾습니다.
  • .is() 메서드는 선택된 요소 객체의 특징을 판별합니다.
  • .last() 메서드는 선택된 요소에서 마지막 번째 자식 요소를 찾습니다.
jquery
$(".list2 li").on("click", function(){
    var li = $(this);
    var Two = li.is(function() {
        return $( "strong", this ).length === 2;
    });

    if (Two){
        li.addClass("rLine");
    } else {
        li.addClass("bLine");
    }
});
html
<h3>탐색(Traversing)</h3>
<div class="list2">
    <ul>
        <li class="click">.eq() 메서드는 선택한 <strong class="strong">요소</strong>에 인덱스 번호에 해당하는 요소를 찾습니다.</li>
        <li class="click">.filter() 메서드는 선택된 <strong class="strong">요소</strong>에서 선택하거나 <strong class="strong">함수</strong>를 사용할 수 있습니다.</li>
        <li class="click">.first() 메서드는 선택된 <strong class="strong">요소</strong>에서 첫번째 자식 요소를 찾습니다.</li>
        <li class="click">.has() 메서드는 선택된 요소의 자식 <strong class="strong">요소</strong>에서 주어진 선택자를 찾습니다.</li>
        <li class="click">.is() 메서드는 선택된 <strong class="strong">요소</strong> 객체의 <strong class="strong">특징</strong>을 판별합니다.</li>
        <li class="click">.last() 메서드는 선택된 요소에서 마지막 번째 자식 <strong class="strong">요소</strong>를 찾습니다.</li>
    </ul>
</div>
Total
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Sample</title>
    <style>
        .strong:before {content:'strong'; padding: 4px 4px 2px 4px; font-size: 90%; color: #3d90b7; white-space: nowrap; background-color: #e7f6fd; border-radius: 4px;border: 1px dashed #3d90b7;}
        .click:before {content:'click'; padding: 4px 4px 2px 4px; font-size: 90%; color: #3d90b7; white-space: nowrap; background-color: #e7f6fd; border-radius: 4px;border: 1px dashed #3d90b7;}
        .rLine {padding: 4px 4px 2px 10px; font-size: 90%; color: #c7254e; white-space: nowrap; background-color: #f9f2f4; border-radius: 4px; border: 1px dashed #a51a3d;}
        .bLine {padding: 4px 6px 2px 6px; font-size: 90%; color: #3d90b7; white-space: nowrap; background-color: #e7f6fd; border-radius: 4px;border: 1px dashed #3d90b7;}
        a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block; border-radius: 20px; text-decoration: none;}
    </style>
</head>
<body>
    
    <h3>탐색(Traversing)</h3>
    <div class="list2">
        <ul>
            <li class="click">.eq() 메서드는 선택한 <strong class="strong">요소</strong>에 인덱스 번호에 해당하는 요소를 찾습니다.</li>
            <li class="click">.filter() 메서드는 선택된 <strong class="strong">요소</strong>에서 선택하거나 <strong class="strong">함수</strong>를 사용할 수 있습니다.</li>
            <li class="click">.first() 메서드는 선택된 <strong class="strong">요소</strong>에서 첫번째 자식 요소를 찾습니다.</li>
            <li class="click">.has() 메서드는 선택된 요소의 자식 <strong class="strong">요소</strong>에서 주어진 선택자를 찾습니다.</li>
            <li class="click">.is() 메서드는 선택된 <strong class="strong">요소</strong> 객체의 <strong class="strong">특징</strong>을 판별합니다.</li>
            <li class="click">.last() 메서드는 선택된 요소에서 마지막 번째 자식 <strong class="strong">요소</strong>를 찾습니다.</li>
        </ul>
    </div>
    
    <div class="choice2">
        <a href="#" class="off1">리셋</a>
        <a href="#" class="btn1">strong 태그가 두개 있으면 파란색, 하나 있으면 붉은색으로 표현됩니다.</a>
    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        $(".choice2 .off1").on("click", function(e){
            e.preventDefault();
            $(".list2 li").removeClass();
        });
        $(".list2 li").on("click", function(e){
            e.preventDefault();
            
            var li = $(this);
            var Two = li.is(function() {
                return $( "strong", this ).length === 2;
            });
            
            if (Two){
                li.addClass("rLine");
            } else {
                li.addClass("bLine");
            }
        });
    </script>

</body>
</html>

샘플(Sample)

선택한 요소 부모에 따라 true, false값을 설정할 수 있는 예제입니다.

Sample3

탐색(Traversing)

  • .eq() 메서드는 선택한 요소에 인덱스 번호에 해당하는 요소를 찾습니다.
  • .filter() 메서드는 선택된 요소에서 선택하거나 함수를 사용할 수 있습니다.
  • .first() 메서드는 선택된 요소에서 첫번째 자식 요소를 찾습니다.
  • .has() 메서드는 선택된 요소의 자식 요소에서 주어진 선택자를 찾습니다.
  • .is() 메서드는 선택된 요소 객체의 특징을 판별합니다.
  • .last() 메서드는 선택된 요소에서 마지막 번째 자식 요소를 찾습니다.

jquery
$(".choice3 .off1").on("click", function(e){
    $("p").text("");
});
$(".choice3 .btn1").on("click", function(e){
    var is = $(".list3 li" ).parent().is("ul");
    $(".list3 p").html("<em>select</em>의 부모가 ul이 맞으면 'ture' 아니면 'false'를 반환합니다. = " + is);
});
$(".choice3 .btn2").on("click", function(e){
    var is = $(".list3 li").parent().is("div");
    $(".list3 p").html("<em>select</em>의 부모가 ul이 맞으면 'ture' 아니면 'false'를 반환합니다. = " + is);
});
html
<h3>탐색(Traversing)</h3>
<div class="list3">
    <ul>
        <li class="select">.eq() 메서드는 선택한 요소에 인덱스 번호에 해당하는 요소를 찾습니다.</li>
        <li class="select">.filter() 메서드는 선택된 요소에서 선택하거나 함수를 사용할 수 있습니다.</li>
        <li class="select">.first() 메서드는 선택된 요소에서 첫번째 자식 요소를 찾습니다.</li>
        <li class="select">.has() 메서드는 선택된 요소의 자식 요소에서 주어진 선택자를 찾습니다.</li>
        <li class="select">.is() 메서드는 선택된 요소 객체의 특징을 판별합니다.</li>
        <li class="select">.last() 메서드는 선택된 요소에서 마지막 번째 자식 요소를 찾습니다.</li>
    </ul>
    <p></p>
</div>
Total
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Sample</title>
    <style>
        .select:before {content:'Select'; padding: 4px 4px 2px 4px; font-size: 90%; color: #3d90b7; white-space: nowrap; background-color: #e7f6fd; border-radius: 4px;border: 1px dashed #3d90b7;}
        .rLine {padding: 4px 4px 2px 10px; font-size: 90%; color: #c7254e; white-space: nowrap; background-color: #f9f2f4; border-radius: 4px; border: 1px dashed #a51a3d;}
        .bLine {padding: 4px 6px 2px 6px; font-size: 90%; color: #3d90b7; white-space: nowrap; background-color: #e7f6fd; border-radius: 4px;border: 1px dashed #3d90b7;}
        a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block; border-radius: 20px; text-decoration: none;}
    </style>
</head>
<body>
    
    <h3>탐색(Traversing)</h3>
    <div class="list3">
        <ul>
            <li class="select">.eq() 메서드는 선택한 요소에 인덱스 번호에 해당하는 요소를 찾습니다.</li>
            <li class="select">.filter() 메서드는 선택된 요소에서 선택하거나 함수를 사용할 수 있습니다.</li>
            <li class="select">.first() 메서드는 선택된 요소에서 첫번째 자식 요소를 찾습니다.</li>
            <li class="select">.has() 메서드는 선택된 요소의 자식 요소에서 주어진 선택자를 찾습니다.</li>
            <li class="select">.is() 메서드는 선택된 요소 객체의 특징을 판별합니다.</li>
            <li class="select">.last() 메서드는 선택된 요소에서 마지막 번째 자식 요소를 찾습니다.</li>
        </ul>
        <p></p>
    </div>
    
    <div class="choice3">
        <a href="#" class="off1">리셋</a>
        <a href="#" class="btn1">클릭하면 <em>select</em>의 부모가 ul인지 확인합니다.</a>
        <a href="#" class="btn2">클릭하면 <em>select</em>의 부모가 div인지 확인합니다.</a>
    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        $(".choice3 .off1").on("click", function(e){
            e.preventDefault();
            $(".list3 li").removeClass("rLine");
        });
        $(".choice3 .btn1").on("click", function(e){
            e.preventDefault();
            
            var is = $(".list3 li" ).parent().is("ul");
            $(".list3 p").text("<em>select</em>의 부모가 ul이 맞으면 'ture' 아니면 'false'를 반환합니다. = " + is);
        });
        $(".choice3 .btn2").on("click", function(e){
            e.preventDefault();
            
            var is = $(".list3 li").parent().is("div");
            $(".list3 p").text("<em>select</em>의 부모가 ul이 맞으면 'ture' 아니면 'false'를 반환합니다. = " + is);
        });
    </script>

</body>
</html>

샘플(Sample)

선택한 요소 중에 원하는 선택자가 있으면 선택한 요소를 선택하는 예제입니다.

Sample4

탐색(Traversing)

  • .eq() 메서드는 선택한 요소에 인덱스 번호에 해당하는 요소를 찾습니다.
  • .filter() 메서드는 선택된 요소에서 선택하거나 함수를 사용할 수 있습니다.
  • .first() 메서드는 선택된 요소에서 첫번째 자식 요소를 찾습니다.
  • .has() 메서드는 선택된 요소의 자식 요소에서 주어진 선택자를 찾습니다.
  • .is() 메서드는 선택된 요소 객체의 특징을 판별합니다.
  • .last() 메서드는 선택된 요소에서 마지막 번째 자식 요소를 찾습니다.

리셋 리스트를 클릭하면 파란색으로 변경되고 붉은 색을 클릭하면 사라집니다.
jquery
$(".choice3 .off1").on("click", function(e){
    $(".list3 li").removeClass("rLine");
});

var alt = $(".list4 li:nth-child(2n)").addClass("rLine");

$(".list4 li").on("click", function(e){
    var li = $(this);

    if ( li.is(alt) ) {
        li.slideUp();
    }else {
        li.addClass("bLine");
    }
});
html
<h3>탐색(Traversing)</h3>
<div class="list4">
    <ul>
        <li>.eq() 메서드는 선택한 요소에 인덱스 번호에 해당하는 요소를 찾습니다.</li>
        <li>.filter() 메서드는 선택된 요소에서 선택하거나 함수를 사용할 수 있습니다.</li>
        <li>.first() 메서드는 선택된 요소에서 첫번째 자식 요소를 찾습니다.</li>
        <li>.has() 메서드는 선택된 요소의 자식 요소에서 주어진 선택자를 찾습니다.</li>
        <li>.is() 메서드는 선택된 요소 객체의 특징을 판별합니다.</li>
        <li>.last() 메서드는 선택된 요소에서 마지막 번째 자식 요소를 찾습니다.</li>
    </ul>
    <p></p>
</div>
Total
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Sample</title>
    <style>
        .select:before {content:'Select'; padding: 4px 4px 2px 4px; font-size: 90%; color: #3d90b7; white-space: nowrap; background-color: #e7f6fd; border-radius: 4px;border: 1px dashed #3d90b7;}
        .rLine {padding: 4px 4px 2px 10px; font-size: 90%; color: #c7254e; white-space: nowrap; background-color: #f9f2f4; border-radius: 4px; border: 1px dashed #a51a3d;}
        .bLine {padding: 4px 6px 2px 6px; font-size: 90%; color: #3d90b7; white-space: nowrap; background-color: #e7f6fd; border-radius: 4px;border: 1px dashed #3d90b7;}
        a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block; border-radius: 20px; text-decoration: none;}
    </style>
</head>
<body>
    
    <h3>탐색(Traversing)</h3>
    <div class="list4">
        <ul>
            <li>.eq() 메서드는 선택한 요소에 인덱스 번호에 해당하는 요소를 찾습니다.</li>
            <li>.filter() 메서드는 선택된 요소에서 선택하거나 함수를 사용할 수 있습니다.</li>
            <li>.first() 메서드는 선택된 요소에서 첫번째 자식 요소를 찾습니다.</li>
            <li>.has() 메서드는 선택된 요소의 자식 요소에서 주어진 선택자를 찾습니다.</li>
            <li>.is() 메서드는 선택된 요소 객체의 특징을 판별합니다.</li>
            <li>.last() 메서드는 선택된 요소에서 마지막 번째 자식 요소를 찾습니다.</li>
        </ul>
        <p></p>
    </div>
    
    <div class="choice4">
        <a href="#" class="off1">리셋</a>
        <a class="btn1">리스트를 클릭하면 파란색으로 변경되고 붉은 색을 클릭하면 사라집니다.</a>
    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        $(".choice3 .off1").on("click", function(e){
            e.preventDefault();
            $(".list3 li").removeClass("rLine");
        });
        
        var alt = $(".list4 li:nth-child(2n)").addClass("rLine");
        
        $(".list4 li").on("click", function(e){
            e.preventDefault();
            
            var li = $(this);
            
            if ( li.is(alt) ) {
                li.slideUp();
            }else {
                li.addClass("bLine");
            }
        });
    </script>

</body>
</html>

공유하기(Share) 더보기

  • 네이버 블러그 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 트위터 공유하기
  • 트위터 공유하기

공감하기(Like) 더보기

태그(Tag) 더보기

질문하기(Questions)
댓글쓰기 폼