jquery实现的倒数获取li元素简单介绍

快乐打工仔 分类:实例代码

本章节分享一段代码实例,它实现了倒数获取li元素的功能。

比如我要获取倒数第二个li元素,下面就是此功能的演示。

代码如下:

<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.pipipi.net/" />  
<title>犀牛前端部落</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>  
<script type="text/javascript">
$(document).ready(function(){
  var text=$("#box li").eq(-2).text();
  $("#show").text(text);
});
</script>
</head> 
<body> 
<ul id="box">
  <li>只有努力奋斗才会有美好的未来。</li>
  <li>没有人一开始就是高手,必须要好好学习。</li>
  <li>分享互助是进步的最大源动力。</li>
  <li>每一天都是新的要好好真心</li>
</ul>
<div id="show"></div>
</body> 
</html>

上面的代码实现了我们的要求,实现的原理也非常的简单。

大家eq()的参数为0的时候就是获取第一个元素,为1的时候就是第二个元素,以此类推。

所以当参数为-1的时候理所当然就是倒数第一个,那么-2就是倒数第二个,以此类推。

相关阅读:

(1).eq()方法可以参阅jQuery eq()一章节。

(2).text()方法可以参阅jQuery text()一章节。

回复

我来回复
  • 暂无回复内容