.is()

类别：遍历 > 筛选

.is( selector )返回类型：Boolean

描述：针对一个选择器、元素或jQuery对象检查当前匹配的元素集合，如果这些元素至少有一个匹配给定的参数，就返回true。

  • 增补版本：1.0.is( selector )

    • selector
      类型：Selector
      一个字符串，包含了选择器表达式，以匹配针对的元素

  • 增补版本：1.6.is( function )

    • function
      类型：Function( Integer index, Element element ) => Boolean
      一个函数，用于测试集合中的每个元素。它接受两个参数，index，它是元素在jQuery集合中的索引，以及element，它是该DOM元素。在函数内部，this指的是当前DOM元素。

  • 增补版本：1.6.is( selection )

    • selection
      类型：jQuery
      一个已有的jQuery对象，匹配针对的元素的当前集合。

  • 增补版本：1.6.is( elements )

    • elements
      类型：Element
      一个或多个元素，匹配所针对的元素的当前集合。

不同于其它筛选方法，.is()方法并不创建新的jQuery对象。而是，它允许你测试jQuery对象的内容。它在回调函数里面，譬如事件处理函数里面很有用。

假设你有一个列表，其中两个项包含了子元素：

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

你可以对<ul>元素附加一个点击处理函数，然后限制代码只有在列表本身被点吉时才触发，子元素被点击时不触发：

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

现在，当用户点击第一项的单词“list”或第三项的任何位置时，被点击的列表项将变成红色背景。然而，如果用户点击第一项的“item 1”或第二项的任何位置，不会发生任何事件，因为那样的话，事件的目标将分别是<strong>和<span>。

在jQuery 1.7以前的版本中，在带有定位选择器（譬如:first、:gt()和:even）的选择器字符串中，定位筛选是针对传给.is()的jQuery对象做的，不是针对包含文档。所以，针对上面显示的HTML，像$( "li:first" ).is( "li:last" )这样的表达式返回true，但是$( "li:first-child" ).is( "li:last-child" )返回false。此外Sizzle中有一个bug，阻止了很多定位选择器正常工作。这两个因素使定位选择器几乎不能用于筛选器。

自从jQuery 1.7以来，带有定位选择器的选择器字符串，针对文档应用选择器，然后确定当前jQuery集合的第一个元素是否匹配任何结果元素。从而针对上面显示的HTML，像$( "li:first" ).is( "li:last" )这样的表达式返回false。请注意，因为定位选择器是jQuery附加，不是W3C标准，所以我们建议在可行时请使用W3C选择器。

使用函数

此方法的第二种形式相对于元素估值表达式，然于元素而不是基于选择器。对于每个元素，如果函数都返回true，则.is()也将返回true。例如，给出一段较为复杂的HTML片断：

1
2
3
4
5
6
7
8
 
<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>元素的数量，如下所示：

1
2
3
4
5
6
7
8
9
10
11
 
$( "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()的方法。

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>

演示：

返回蓝色，因为输入的父元素是一个表单元素。

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
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>is demo</title>
  <style>
  div {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.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>

演示：

返回false，因为输入的父元素是一个<p>元素。

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
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>is demo</title>
  <style>
  div {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.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>

演示：

针对一个已有的交替列表元素的集合作检查。蓝色的，交替滑上滑下列表元素，与此同时，其它的变成红色。

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
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>is demo</title>
  <style>
  li {
    cursor: pointer;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.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", "#0ff" );
$( "li" ).click(function() {
  var li = $( this );
  if ( li.is( alt ) ) {
    li.slideUp();
  } else {
    li.css( "background", "red" );
  }
});
</script>
 
</body>
</html>

演示：

一个实现上面示例的替代方式是使用一个元素，而不是一个jQuery对象。针对一个交替列表元素的已有的集合检查。蓝色的，交替滑上滑下列表元素，与此同时，其它的变成红色。

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
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>is demo</title>
  <style>
  li {
    cursor: pointer;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.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", "#0ff" );
$( "li" ).click(function() {
  if ( alt.is( this ) ) {
    $( this ).slideUp();
  } else {
    $( this ).css( "background", "red" );
  }
});
</script>
 
</body>
</html>

演示：