JavaScript DHTML/jQuery/index
Содержание
- 1 Get index among query
- 2 On click, returns the index (based zero) of that div in the page.
- 3 Returns -1, as there is no element with ID bar.
- 4 Returns the index for the element with ID foobar.
- 5 Returns the index for the element with ID foo within another element.
- 6 Use switch to check the clicked button
Get index among query
<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>
<div><h1>header 1</h1></div>
</body>
</html>
On click, returns the index (based zero) of that div in the page.
<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>
<span></span>
<div>A</div><div>B</div>
</body>
</html>
Returns -1, as there is no element with ID bar.
<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>
<div id="foobar"><b></b><span id="foo"></span></div>
</body>
</html>
Returns the index for the element with ID foobar.
<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>
<div id="foobar"><b></b><span id="foo"></span></div>
</body>
</html>
Returns the index for the element with ID foo within another element.
<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>
<div id="foobar"><b></b><span id="foo"></span></div>
</body>
</html>
Use switch to check the clicked button
<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>
<div>A div</div>
<button>0</button>
<button>1</button>
<button>2</button>
<button>3</button>
<span></span>
</body>
</html>