JavaScript Tutorial/jQuery/Selector even odd index
Содержание
- 1 eq(index) matches a single element by its index.
- 2 even() matches even elements, zero-indexed.
- 3 Even number tags
- 4 gt(index) matches all elements with an index above the given one.
- 5 lt(index) matches all elements with an index below the given one.
- 6 Matches all elements with an index above the given one
- 7 Matches all elements with an index below the given one
- 8 Matches a single element by its index
- 9 Matches even elements, zero-indexed
- 10 Matches odd elements, zero-indexed.htm
- 11 odd() matches odd elements, zero-indexed.
- 12 Odd number paragraph
- 13 Positional selectors supported by jQuery: selecting elements based on their position in the DOM
eq(index) matches a single element by its index.
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("td:eq(2)").css("color", "red"); }); </script> </head> <body> <body>
TD #0 | TD #1 | TD #2 |
TD #3 | TD #4 | TD #5 |
TD #6 | TD #7 | TD #8 |
</body>
</html></source>
even() matches even elements, zero-indexed.
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("tr:even").css("background-color", "red"); }); </script> </head> <body> <body>
TD #0 | TD #1 | TD #2 |
TD #3 | TD #4 | TD #5 |
TD #6 | TD #7 | TD #8 |
</body>
</html></source>
Even number tags
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("p:even").removeClass("blue"); }); </script> </head> <style> .blue { color:blue; } </style> <body> <body>
A
A
A
</body>
</html></source>
gt(index) matches all elements with an index above the given one.
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("tr:gt(1)").css("background-color", "red"); }); </script> </head> <body> <body>
TD #0 | TD #1 | TD #2 |
TD #3 | TD #4 | TD #5 |
TD #6 | TD #7 | TD #8 |
</body>
</html></source>
lt(index) matches all elements with an index below the given one.
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("td:lt(2)").css("color", "red"); }); </script> </head> <body> <body>
First |
Middle |
Last |
</body>
</html></source>
Matches all elements with an index above the given one
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("td:gt(1)").css("color", "red");
}); </script> </head> <body>
Row |
Row |
Row |
Row |
</body>
</html></source>
Matches all elements with an index below the given one
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("td:lt(1)").css("color", "red");
}); </script> </head> <body>
Row |
Row |
Row |
Row |
</body>
</html></source>
Matches a single element by its index
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("td:eq(2)").css("color", "red");
}); </script> </head> <body>
Row |
Row |
Row |
Row |
</body>
</html></source>
Matches even elements, zero-indexed
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("tr:even").css("color", "red");
}); </script> </head> <body>
Row |
Row |
Row |
Row |
</body>
</html></source>
Matches odd elements, zero-indexed.htm
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("tr:odd").css("color", "red");
}); </script> </head> <body>
Row |
Row |
Row |
Row |
</body>
</html></source>
odd() matches odd elements, zero-indexed.
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("tr:odd").css("background-color", "#bbbbff"); }); </script> </head> <body> <body>
First |
Middle |
Last |
</body>
</html></source>
Odd number paragraph
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("p:odd").removeClass("blue"); }); </script> </head> <style> .blue { color:blue; } </style> <body> <body>
A
A
A
</body>
</html></source>
Positional selectors supported by jQuery: selecting elements based on their position in the DOM
<source lang="javascript">
Selector Description
- first The first match of the page.
- last The last match of the page.
- first-child The first child element.
- last-child The last child element.
- only-child Returns all elements that have no siblings.
- nth-child(n) The nth child element.
- nth-child(even|odd) Even or odd children.
- nth-child(Xn+Y) The nth child element.
- even and :odd Even and odd matching elements page-wide.
- eq(n) The nth matching element.
- gt(n) Matching elements after (and excluding) the nth matching element.
- lt(n) Matching elements before (and excluding) the nth matching element.</source>