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

 我来答
轻烟谈生活
高粉答主

2019-07-08 · 轻烟和你聊聊生活中的有趣事
轻烟谈生活
采纳数:7 获赞数:116635

向TA提问 私信TA
展开全部

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

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

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

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

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

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

learneroner
高粉答主

推荐于2018-02-26 · 关注我不会让你失望
知道大有可为答主
回答量:1.1万
采纳率:91%
帮助的人:6358万
展开全部

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

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

示例代码如下

  1. 创建Html元素

    <div class="box">
    <span>点击li获取其index顺序,注意index从0开始计数:</span><br>
    <div class="content">
    <li>栗子</li>
    <li>李子</li>
    <li>梨子</li>
    <li>荔枝</li>
    </div>
    </div>
  2. 设置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;}
  3. 编写jquery代码

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


已赞过 已踩过<
你对这个回答的评价是?
评论 收起
临泉注册营业执照
推荐于2016-01-03 · TA获得超过873个赞
知道小有建树答主
回答量:200
采纳率:63%
帮助的人:144万
展开全部
<ul id="listName">
     <li>张三</li>
     <li>李四</li>
     <li>王五</li>
     <li>---</li>
     <li>---</li>
     <li>---</li>
</ul>
<script type="text/javascript">
        $(function () {
            $("#listName li").each(function (i) {
                var This = $(this);
                This.click(function () {
                    alert(This.index());
                });
            });
        });
</script>

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

本回答被提问者和网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(1)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式