JavaScript Tutorial/jQuery/index

Материал из Web эксперт
Перейти к: навигация, поиск

Get index among query

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
            var index = $("div").index(this);
            alert(index);
       });
   </script>
 </head>
 <body>
   <body>

header 1

   </body>

</html></source>


On click, returns the index (based zero) of that div in the page.

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
           $("div").click(function () {
             var index = $("div").index(this);
             $("span").text("That was div index #" + index);
           });
       });
   </script>
 </head>
 <body>
   <body>
       
A
B
   </body>

</html></source>


Returns -1, as there is no element with ID bar.

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
           alert($("*").index( $("#foo1")[0] ));
       });
   </script>
 </head>
 <body>
   <body>
   </body>

</html></source>


Returns the index for the element with ID foobar.

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
           alert($("*").index( $("#foobar")[0] ));
       });
   </script>
 </head>
 <body>
   <body>
   </body>

</html></source>


Returns the index for the element with ID foo within another element.

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
           alert($("*").index( $("#foo")[0] ));
       });
   </script>
 </head>
 <body>
   <body>
   </body>

</html></source>


Use switch to check the clicked button

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
           $("button").click(function(e) {
             switch ($("button").index(this)) {
               case 0 :
                 $("div").text("0");
                 break;
               case 1 :
                 $("div").text("1");
                 break;
               case 2 :
                 $("div").text("2");
                 break;
               case 3 :
                 $("div").text("3");
                 break;
             }
       
             $("span").text("" + value);
           });
       });
   </script>
 </head>
 <body>
   <body>
A div
         <button>0</button>
         <button>1</button>
         <button>2</button>
         <button>3</button>
         
   </body>

</html></source>