본문 바로가기
CODING/JavaScript

.is() Method

by Murugan 2018. 10. 28.
반응형

.is() Method

 

설명

선택한 요소 중 하나 또는 하나 이상이 selectorElement 와 일치하는지 확인하여 일치하는 경우 true를 반환

 

통사론

$(selector).is(selectorElement,function(index,element))

Parameter Description 
selectorElement 요소의 인덱스 위치
function(index,element)
* 선택 과목. 선택한 요소 그룹에 대해 실행할 함수를 지정합니다.

index - 요소의 인덱스 위치
element - 현재의 요소 (「this」셀렉터도 사용할 수있다)

 

<p>의 부모가 <div> 요소 인 경우 일부 텍스트에 경고합니다.

1
2
3
if ($("p").parent().is("div")) {
    alert("Parent of p is div"); 
}

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!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>
 

 

출처 : https://www.w3schools.com/jquery/traversing_is.asp

반응형