jQuery: The Write Less, Do More JavaScript Library

Traversing/is

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Traversing

[edit]

is( expr )

Checks the current selection against an expression and returns true, if at least one element of the selection fits the given expression.
If no element fits, or the expression is not valid, then the response will be 'false'. filter is used internally, therefore all rules that apply there apply here, as well.
Arguments:
exprString
The expression with which to filter

Examples:
Shows a few ways is() can be used inside an event handler.

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



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    
    $("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>
  <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>
</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>
</body>
</html>

Returns true, because the parent of the input is a form element

    var isFormParent = $("input[@type='checkbox']").parent().is("form")
    $("div").text("isFormParent = " + isFormParent);



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    
    var isFormParent = $("input[@type='checkbox']").parent().is("form")
    $("div").text("isFormParent = " + isFormParent);

  });
  </script>
  <style>div { color:red; }</style>
</head>
<body>
  <form><input type="checkbox" /></form>
  <div></div>
</body>
</html>

Returns false, because the parent of the input is a p element

    var isFormParent = $("input[@type='checkbox']").parent().is("form")
    $("div").text("isFormParent = " + isFormParent);



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    
    var isFormParent = $("input[@type='checkbox']").parent().is("form")
    $("div").text("isFormParent = " + isFormParent);

  });
  </script>
  <style>div { color:red; }</style>
</head>
<body>
  <form><p><input type="checkbox" /></p></form>
  <div></div>
</body>
</html>

NameType

Retrieved from "http://docs.jquery.com/Traversing/is"