.is()

.is( selector ) 官网原E文: Boolean

描述: 检查当前匹配的元素集合匹配一个选择器,DOM元素,或者jQuery对象,如果这些元素至少一个匹配给定的参数,那么返回true。

  • version added: 1.0.is( selector )

    selector用来匹配元素的一个字符串,其中包含一个选择表达式。

  • version added: 1.6.is( function(index) )

    function(index)一个函数用来作为测试元素的集合。它接受一个参数, index,这是元素在jQuery集合的索引。在函数, this指的是当前的DOM元素。

  • version added: 1.6.is( jQuery object )

    jQuery object现有的jQuery对象,以匹配当前的元素。

  • version added: 1.6.is( element )

    element一个用于匹配元素的DOM元素。

不像其他过滤和遍历方法,.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> element上附加一个单击处理程序,然后限制的代码只有当列表项目本身时触发,并不是它的孩子之一,被点击:

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

现在,当在用户点击三个项目中的第一个项目中的单词或任何地方,点击列中的项目将得到一个红色背景。但是,当用户点击 item 1 中的第一项,或第二项的任何地方,什么都不会发生,因为在这些情况下,事件目标的将分别是<strong> 或者 <span>

使用函数

第二个形式方法相关函数表达上,而不是一个选择器。对于每个元素,如果函数返回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>在那个时候,您可以将每一个<li>单击处理程序计算结果<strong>的数量,像这样:

$("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");
  }
});

Examples:

Example: 显示的 is()可用于在一个事件处理程序的几种方法。 Shows a few ways is() can be used inside an event handler.

<!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-git.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>

Demo:

Example: 返回true,因为input的父级是一个表单的元素。

<!DOCTYPE html>
<html>
<head>
  <style>div { color:red; }</style>
  <script src="http://code.jquery.com/jquery-git.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>

Demo:

Example: 返回false,因为input的父级是一个P元素。

<!DOCTYPE html>
<html>
<head>
  <style>div { color:red; }</style>
  <script src="http://code.jquery.com/jquery-git.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>

Demo:

Example: 针对检查列表元素交替现有的集合。 Blue, alternating list elements slide up while others turn red.

<!DOCTYPE html>
<html>
<head>
  <style>li { cursor:pointer; }</style>
  <script src="http://code.jquery.com/jquery-git.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>

Demo:

Example: 另一种方式来实现上面的例子中使用的元素而不是一个jQuery对象。An alternate way to achieve the above example using an element rather than a jQuery object. Checks against an existing collection of alternating list elements. Blue, alternating list elements slide up while others turn red.

<!DOCTYPE html>
<html>
<head>
  <style>li { cursor:pointer; }</style>
  <script src="http://code.jquery.com/jquery-git.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>

Demo:

jQuery 1.6 API 中文版Clove整理、修订