Next »
88/185
« Previous

.is()

In this chapter you will learn:

  1. Syntax and Description for .is()
  2. Check to see if the parent element is a form element
  3. Does the element have the style I need
  4. Switch with .is() method

Syntax and Description

.is(selector)

checks the current matched set of elements against a selector and return true if at least one of these elements matches the selector. selector is a string containing a selector expression to match elements against

Its return value is a boolean indicating whether an element matches the selector.

Is parent element a form

The following code selects a check box input element and then gets its parent element. After that it uses is() to check if the parent is a form element.

<html><!--   j  a  v  a  2s .  co  m-->
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            var isFormParent = $("input[type='checkbox']").parent().is("form")
            alert(isFormParent);
        });
    </script>
  </head>
  <body>
    <body>
      <form><input type="checkbox" /></form>
      <div></div>

  </body>
</html>

Click to view the demo

Does it have the style

The following code uses is() to tell is it a style I need.

<html><!-- j  a  v  a 2  s  .c  om-->
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
           $("div").one('click', function () {
              if ($(this).is(".blue,.red")) {
                $("p").text("It's the blue and red div.");
              }else{
                $("p").text("It's NOT the blue and red div.");
              }
              $("p").hide().slideDown("slow");
           });
        });
    </script>
  </head>
  <body>
    <body>
      Press each to see the text.
      <div class=blue>java2s.com</div>
      <div class=red>java2s.com</div>
      <div>java2s.com</div>
      <div>java2s.com</div>
      <div>java2s.com</div>
      <div>java2s.com</div>
      <p></p>
  </body>
</html>

Click to view the demo

Switch with .is() method

The following code shows how to use .is() method as the switch for output different text.

<html><!--from   ja  v  a 2 s  .co  m-->
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
                   $("div").one('click', function () {
                      if ($(this).is(":first-child")) {
                        $("p").text(":first-child");
                      } else if ($(this).is(".blue,.red")) {
                        $("p").text("It's a blue or red div.");
                      } else if ($(this).is(":contains('java2s.com')")) {
                        $("p").text("It's java2s.com!");
                      } else {
                        $("p").html("It's nothing <em>special</em>.");
                      }
                    });
        });
    </script>
 <style>
  div.middle { color: red; }
</style>
  </head>
  <body>
    <body>
          <div>java2s.com</div>
          <div class="blue">jav a2s.com</div>
          <div class="red">java2s.com</div>
          <div><span>java2s.com</span>java 2s.com</div>
          <div class="blue">java2s.co m</div>
          <p>java2s.com</p>
    </body>
</html>

Click to view the demo

Next chapter...

What you will learn in the next chapter:

  1. Syntax and Description for .last() method
Next »
« Previous