JavaScript Tutorial/jQuery/eq — различия между версиями

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

Текущая версия на 08:25, 26 мая 2010

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

<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>
          <div id="single">asdf</div>
          <div id="single">asdf</div>
          <div id="single">asdf</div>
          <div id="single">asdf</div>
    </body>
</html>


eq: select by index

<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>
    <ul>
      <li>A</li>
      <li>B</li>
      <li>C</li>
      <li>D</li>
    </ul>
  </body>
</html>


Reduces the selection to the second selected element.

<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>
        <p>A</p><p>B</p>
    </body>
</html>


Reduce the set of matched elements to a single element

<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>
      <div>asdf</div>
      <div>asdf</div>
      <div>asdf</div>
      <div>asdf</div>
      <div>asdf</div>
      <div>asdf</div>
  </body>
</html>