jq 获取元素点击事件下下标
时间: 2023-08-28 08:05:22 浏览: 91
JavaScript 获取元素在父节点中的下标(推荐)
5星 · 资源好评率100%
jq 获取元素点击事件下标的方法通常有两种,一种是使用 `index()` 方法,另一种是使用 `each()` 方法。
使用 `index()` 方法获取元素点击事件下标的示例代码如下:
```html
<ul id="list">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
<script>
$("#list li").on("click", function() {
var index = $(this).index(); // 获取当前元素在同级元素中的下标
console.log(index);
});
</script>
```
上述代码中,当 `li` 元素被点击时,会获取该元素在同级元素中的下标,通过 `console.log()` 方法将下标打印到控制台中。
使用 `each()` 方法获取元素点击事件下标的示例代码如下:
```html
<ul id="list">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
<script>
$("#list li").each(function(i) {
$(this).on("click", function() {
console.log(i); // 获取当前元素的下标
});
});
</script>
```
上述代码中,通过 `each()` 方法遍历 `li` 元素,将每个元素的下标作为参数传递给回调函数中,当元素被点击时,通过 `console.log()` 方法获取当前元素的下标。
需要注意的是,上述代码中的 `$("#list li")` 表示选择 `id` 为 `list` 的元素下的所有 `li` 元素,如果需要选择其他元素,需要对选择器进行相应的修改。
阅读全文