快捷导航
查看: 46201|回复: 9

jQuery如何获取当前li元素是第几个

[复制链接]
发表于 2013-7-3 08:23:43 | 显示全部楼层 |阅读模式
比如有一个li的列表,如果知道当前的li是第几个li元素:
<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>
像这样的结构,我如何知道当前操作的li是第几个,下面是实现的代码
[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
  $("li").click(function(){
    alert($(this).index());
  })
});
</script>
</head>
<body>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>
</body>
</html>

发表于 2013-7-3 11:27:07 | 显示全部楼层
本帖最后由 antzone 于 2014-6-10 23:49 编辑

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
  $("li").click(function(){
    alert($(this).index());
  })
});
</script>
</head>
<body>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>
</body>
</html>

是不是要这个?

评分

参与人数 1金钱 +5 收起 理由
caicai + 5 数次得到帮助略表感谢

查看全部评分

发表于 2013-7-3 10:22:27 | 显示全部楼层
$("ul > li")eq(index);
index就是当前li的序数,从0开始计算。
 楼主| 发表于 2013-7-3 10:33:48 | 显示全部楼层
kuswings 发表于 2013-7-3 10:22
$("ul > li")eq(index);
index就是当前li的序数,从0开始计算。

好像有点问题
您老这个方法好像感觉已经知道这个li是第几个了
还有$("ul>li")是不是表示ul下下的li元素?
发表于 2013-7-3 10:38:44 | 显示全部楼层
caicai 发表于 2013-7-3 10:33
好像有点问题
您老这个方法好像感觉已经知道这个li是第几个了
还有$("ul>li")是不是表示ul下下的li元素 ...

$("ul>li") 表示ul下的li元素,不包括ul下li下的li;

那总要有内容匹配什么的吧
发表于 2013-7-3 10:39:25 | 显示全部楼层
说说你需要的具体效果吧~
 楼主| 发表于 2013-7-3 10:39:32 | 显示全部楼层
kuswings 发表于 2013-7-3 10:38
$("ul>li") 表示ul下的li元素,不包括ul下li下的li;

那总要有内容匹配什么的吧

嗯,我再研究一下
 楼主| 发表于 2013-7-3 15:46:54 | 显示全部楼层
kuswings 发表于 2013-7-3 11:27
是不是要这个?

非常感谢,跪拜了!!
发表于 2014-5-7 10:43:46 | 显示全部楼层
[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html> 
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">  
ul{
  list-style:none;
  width:100px;
  height:25px;
  line-height:25px;
  font-size:12px;
}
</style>  
<script type="text/javascript">   
window.onload=function(){
  var obox=document.getElementById("box");
  var oshow=document.getElementById("show");
  var lis=obox.getElementsByTagName("li");
  for(var index=0;index<lis.length;index++){
    lis[index].theIndex=index;
    lis[index].onclick=function(){
      oshow.innerHTML=this.theIndex;
    }
  }
}
</script>  
</head>
<body>
<div>当前元素的顺序:<span id="show"></span></div>
<ul id="box">
  <li>蚂蚁部落一</li>
  <li>蚂蚁部落二</li>
  <li>蚂蚁部落三</li>
  <li>蚂蚁部落四</li>
  <li>蚂蚁部落五</li>
  <li>蚂蚁部落六</li>
</ul>
</body>
</html>

用上面的这个代码吧,比较完善一些
发表于 2014-5-7 15:32:42 | 显示全部楼层
本帖最后由 futurelord 于 2014-5-7 15:34 编辑

[HTML] 纯文本查看 复制代码运行代码
var li = 某个li,
    list = $('li'),
    indexOf = Array.prototype.indexOf || function(item){
                         var i,len;
                         for (i=0,len=this.length;i<len;i+=1){
                           if (this===item) {
                                          return i;
                           }
                 }
                 return -1;
        }
var index = indexOf.call(list,li);

发表回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们|手机版|小黑屋| ( 鲁ICP备10022556号-3 )

GMT+8, 2017-10-23 21:35 , Processed in 0.087956 second(s), 21 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 蚂蚁部落

快速回复返回顶部 返回列表