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>
