JavaScript DHTML/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.
<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>
<table border="1">
<tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr>
<tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr>
<tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr>
</table>
</body>
</html>
even() matches even elements, zero-indexed.
<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>
<table border="1">
<tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr>
<tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr>
<tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr>
</table>
</body>
</html>
Even number tags
<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>
<p class=blue>A</p>
<p class=blue>A</p>
<p class=blue>A</p>
</body>
</html>
gt(index) matches all elements with an index above the given one.
<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>
<table border="1">
<tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr>
<tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr>
<tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr>
</table>
</body>
</html>
lt(index) matches all elements with an index below the given one.
<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>
<table>
<tr><td>First</td></tr>
<tr><td>Middle</td></tr>
<tr><td>Last</td></tr>
</table>
</body>
</html>
Matches all elements with an index above the given one
<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>
<table border="1">
<tr><td>Row</td></tr>
<tr><td>Row</td></tr>
<tr><td>Row</td></tr>
<tr><td>Row</td></tr>
</table>
</body>
</html>
Matches all elements with an index below the given one
<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>
<table border="1">
<tr><td>Row</td></tr>
<tr><td>Row</td></tr>
<tr><td>Row</td></tr>
<tr><td>Row</td></tr>
</table>
</body>
</html>
Matches a single element by its index
<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>
<table border="1">
<tr><td>Row</td></tr>
<tr><td>Row</td></tr>
<tr><td>Row</td></tr>
<tr><td>Row</td></tr>
</table>
</body>
</html>
Matches even elements, zero-indexed
<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>
<table border="1">
<tr><td>Row</td></tr>
<tr><td>Row</td></tr>
<tr><td>Row</td></tr>
<tr><td>Row</td></tr>
</table>
</body>
</html>
Matches odd elements, zero-indexed.htm
<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>
<table border="1">
<tr><td>Row</td></tr>
<tr><td>Row</td></tr>
<tr><td>Row</td></tr>
<tr><td>Row</td></tr>
</table>
</body>
</html>
odd() matches odd elements, zero-indexed.
<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>
<table>
<tr><td>First</td></tr>
<tr><td>Middle</td></tr>
<tr><td>Last</td></tr>
</table>
</body>
</html>
Odd number paragraph
<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>
<p class=blue>A</p>
<p class=blue>A</p>
<p class=blue>A</p>
</body>
</html>
Positional selectors supported by jQuery: selecting elements based on their position in the DOM
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.