eq(), lt(), gt(), even und odd

by juErik

HTML

<div id="Beschreibung"><!-- --------------------------------------------- Beschreibung -->
  <h3>Test mit verschiedenen selectionen ... </h3>
  <p>Die Index-bezogenen Selektoren (:eq(), :lt(), :gt(), :even, :odd) filtern die Menge der Elemente,
  die die Ausdrücke, die ihnen vorangehen abgestimmt haben. Sie verringern die Menge die sich auf
  die Reihenfolge der Elemente innerhalb dieses abgestimmten Satz basiert.</p>


</div><!-- --------------------------------------------------------------/Beschreibung -->

<table width="100%"  cellpadding="10px">
<tr><td><!-- ----------------------------------------------------------Links -->

<ul class="nav">
  <li>List 1, index 0</li>
  <li>List 1, index 1</li>
  <li>List 1, index 2</li>
</ul>
<ul class="nav">
  <li>List 2, index 3</li>
  <li>List 2, index 4</li>
  <li>List 2, index 5</li>
</ul>
        <small>* index bezieht sich auf class="nav"</small>
</td><td><!-- -------------------------------------------------------Rechts -->
<table>
    <tr>
         <td width="150px"><a href="#" id="a1">$( "ul.nav li:eq(2)" )</a></td><td>: select das Element mit dem Index gleich eq(n)</td>
    </tr>
    <tr>
        <td><a href="#" id="a2">$( "ul.nav li:lt(2)" )</a></td><td>: select alle Elemente mit dem Index kleiner lt(n)</td>
    </tr>
    <tr>
        <td><a href="#" id="a3">$( "ul.nav li:gt(2)" )</a></td><td>: select alle Elemente mit dem Index gr&ouml;&szlig;er gt(n)</td>
    </tr>
    <tr>
        <td><a href="#" id="a4">$( "ul.nav li:even" )</a></td><td>: select alle Elemente mit dem Index (gerade Zahl)</td>
    </tr>
    <tr>
        <td><a href="#" id="a5">$( "ul.nav li:odd" )</a></td><td>: select alle Elemente mit dem Index (ungerade Zahl)</td>
    </tr>
    <tr>
       <td colspan="2">&nbsp;</td>
    </tr>
    <tr>
        <td><a href="#" id="a6">$( "ul.nav li:ep(-2)" )</a></td><td>: ... den 2. Letzten</td>
    </tr>
    <tr>
        <td><a href="#" id="a7">$( "ul.nav li:lt(-2)" )</a></td><td>: ... der kleiner ist als...

JavaScript

$('#a1').mouseover(function(){$( "ul.nav li:eq(2)" ).css( "backgroundColor", "#ff0" );});
  $('#a1').mouseout(function(){ $( "ul.nav li:eq(2)" ).css( "backgroundColor", "" );    });

  $('#a2').mouseover(function(){$( "ul.nav li:lt(2)" ).css( "backgroundColor", "#ff0" );});
  $('#a2').mouseout(function(){ $( "ul.nav li:lt(2)" ).css( "backgroundColor", "" );    });

  $('#a3').mouseover(function(){$( "ul.nav li:gt(2)" ).css( "backgroundColor", "#ff0" );});
  $('#a3').mouseout(function(){ $( "ul.nav li:gt(2)" ).css( "backgroundColor", "" );    });

  $('#a4').mouseover(function(){$( "ul.nav li:even" ).css( "backgroundColor", "#ff0" );});
  $('#a4').mouseout(function(){ $( "ul.nav li:even" ).css( "backgroundColor", "" );    });

  $('#a5').mouseover(function(){$( "ul.nav li:odd" ).css( "backgroundColor", "#ff0" );});
  $('#a5').mouseout(function(){ $( "ul.nav li:odd" ).css( "backgroundColor", "" );    });


  $('#a6').mouseover(function(){$( "ul.nav li:eq(-2)" ).css( "backgroundColor", "#ff0" );});
  $('#a6').mouseout(function(){ $( "ul.nav li:eq(-2)" ).css( "backgroundColor", "" );    });

  $('#a7').mouseover(function(){$( "ul.nav li:lt(-2)" ).css( "backgroundColor", "#ff0" );});
  $('#a7').mouseout(function(){ $( "ul.nav li:lt(-2)" ).css( "backgroundColor", "" );    });

  $('#a8').mouseover(function(){$( "ul.nav li:gt(-2)" ).css( "backgroundColor", "#ff0" );});
  $('#a8').mouseout(function(){ $( "ul.nav li:gt(-2)" ).css( "backgroundColor", "" );    });