JavaScript DHTML/jQuery/eq

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

eq(index) returns the element position in matched elements starts at 0 and goes to length - 1.

   <source lang="html4strict">
 

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
               $("div").eq(2).css("color","blue");
       });
   </script>
   <style>
     .selected { color:red; }
     .highlight { background:yellow; }
   </style>    
 </head>
 <body>
   <body>
asdf
asdf
asdf
asdf
   </body>

</html>


 </source>
   
  


eq: select by index

   <source lang="html4strict">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">

var tmpExample = {

 ready : function() {
   $("ul li").eq(3).addClass("justAdd");
 }

}; $(document).ready(tmpExample.ready);

   </script>
   <style type="text/css">

ul {

   list-style: none;
   margin: 0;
   padding: 0;

} ul li {

   margin: 1px;
   padding: 3px;

} li.justAdd {

   background: #cdb6ed;

}

   </style>
 </head>
 <body>
  • A
  • B
  • C
  • D
 </body>

</html>

 </source>
   
  


Reduces the selection to the second selected element.

   <source lang="html4strict">
 

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
           $("p").eq(1).css("color", "red");
       });
   </script>
 </head>
 <body>
   <body>

A

B

   </body>

</html>


 </source>
   
  


Reduce the set of matched elements to a single element

   <source lang="html4strict">
    

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
         $("div").eq(2).addClass("blue");
    
       });
   </script>
   <style>
   .blue { background:blue; }
  </style>
 </head>
 <body>
   <body>
asdf
asdf
asdf
asdf
asdf
asdf
 </body>

</html>



 </source>