jQuery怎么获取当前li元素顺序

2025-02-27 21:03:28

推荐回答（3个）

回答1：

1、打开html开发工具，新建一个html代码页面。

2、在html页面创建三个p标签，给这三个p标签设置不同的内容。

3、引入jquery库。在title标签后面引用下载好的jquery.js文件。

4、在jquery引用库标签后面新建一个script标签，在这个标签里面添加一个DOM加载完成后执行函数。

5、在DOM加载完成后执行函数里面添加点击p标签时获取当前元素的上一个元素对象。

6、保存html代码后使用浏览器打开，点击p标签弹出框就会显示当前点击标签的上一个标签的内容。

回答2：

jQuery 的 index() 方法返回指定元素相对于其他指定元素的 index 位置，因此可用于获取当前li元素顺序。注意index是从0开始计数的，所以index+1才是实际的顺序。

$("li").click(function() {
    num = $(this).index()+1;   // 当前点击的li元素在一组li中的实际顺序
})

示例代码如下

创建Html元素


	点击li获取其index顺序，注意index从0开始计数：

	
		栗子

		李子

		梨子

		荔枝

设置css样式

div.box{width:300px;padding:20px;margin:20px;border:4px dashed #ccc;}
div.box span{color:#999;font-style:italic;}
div.content{width:250px;margin:10px 0;padding:20px;border:2px solid #ff6666;}
li{padding:10px;}
.red{color:red;}

编写jquery代码

$(function(){
	$("li").click(function() {
		$(this).addClass('red');    // 设置被点击元素为红色，以示区分
		num = $(this).index();
		alert("当前点击li的index是："+num+"，实际顺序是："+(num+1)+"。");
	})
})

观察效果

回答3：


     张三

     李四

     王五

     ---

     ---

     ---


        $(function () {
            $("#listName li").each(function (i) {
                var This = $(this);
                This.click(function () {
                    alert(This.index());
                });
            });
        });

这样你就可以获取你点击的当前是那个li的顺序了，切记Index是从0开始计数的。