The example in this article describes how JQuery uses the index method to obtain the subscript of the Jquery object array. Share it with everyone for your reference. The specific implementation method is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>index方法获取Jquery对象的数组下标</title>
<style type="text/css">
#main{
width:600px;
border:1px solid green;
margin:auto;
padding:10px;
}
#tbl{
border-collapse:collapse;
border-top:1px solid red;
border-left:1px solid red;
margin:auto;
}
#tbl td{
width:60px;
height:60px;
border-collapse:collapse;
border-bottom:1px solid red;
border-right:1px solid red;
}
</style>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
var oldColor;
$(function () {
$("#tbl tr").hover(
function () {
oldColor = $(this).css("backgroundColor");
$(this).css("backgroundColor", "yellow");
},
function () {
$(this).css("backgroundColor", oldColor);
});
$("#tbl tr").click(function () {
alert($("#tbl tr").index($(this))); //获取元素下标
});
});
</script>
</head>
<body>
<div id="main">
<table id="tbl">
<tr>
<td>1</td><td>1</td><td>1</td>
</tr>
<tr>
<td class="tdClass">2</td><td>2</td><td>2</td>
</tr>
<tr>
<td>3</td><td>3</td><td>3</td>
</tr>
<tr>
<td>4</td><td>4</td><td class="tdClass">4</td>
</tr>
<tr>
<td>5</td><td>5</td><td>5</td>
</tr>
<tr>
<td>6</td><td>6</td><td class="tdClass">6</td>
</tr>
</table>
</div>
</body>
</html>I hope this article will be helpful to everyone’s jQuery programming.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
