JavaScript Tutorial/jQuery/index
Версия от 21:52, 25 мая 2010; (обсуждение)
Содержание
Get index among query
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ var index = $("div").index(this); alert(index);
}); </script>
</head> <body> <body>
header 1
</body>
</html></source>
On click, returns the index (based zero) of that div in the page.
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("div").click(function () { var index = $("div").index(this); $("span").text("That was div index #" + index); });
}); </script> </head> <body> <body>
A
B
</body>
</html></source>
Returns -1, as there is no element with ID bar.
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ alert($("*").index( $("#foo1")[0] ));
}); </script> </head> <body> <body>
</body>
</html></source>
Returns the index for the element with ID foobar.
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ alert($("*").index( $("#foobar")[0] ));
}); </script> </head> <body> <body>
</body>
</html></source>
Returns the index for the element with ID foo within another element.
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ alert($("*").index( $("#foo")[0] ));
}); </script> </head> <body> <body>
</body>
</html></source>
Use switch to check the clicked button
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(e) { switch ($("button").index(this)) { case 0 : $("div").text("0"); break; case 1 : $("div").text("1"); break; case 2 : $("div").text("2"); break; case 3 : $("div").text("3"); break; } $("span").text("" + value); }); }); </script> </head> <body> <body>
A div
<button>0</button> <button>1</button> <button>2</button> <button>3</button> </body>
</html></source>