爱程序网

jQuery获取当前元素的上一个或者下一个元素代码实例

来源: 阅读:

jQuery获取当前元素的上一个或者下一个元素代码实例:
本章节介绍一下如何获取当前元素的上一个或者下一个元素,希望能够给需要的朋友带来帮助。
代码如下:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style type="text/css"> 
li{
  list-style:none;
  font-size:12px;
}
</style> 
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 
<script type="text/javascript">  
$(document).ready(function(){
  $("#pre").click(function(){
    $("#show").text($("#box li").eq(2).prev().text())
  })
  $("#next").click(function(){
    $("#show").text($("#box li").eq(2).next().text())
  })
})
</script> 
</head> 
<body> 
<div id="show"></div>
<ul id="box">  
  <li>蚂蚁部落一</li>  
  <li>蚂蚁部落二</li>  
  <li>蚂蚁部落三</li>  
  <li>蚂蚁部落四</li>  
  <li>蚂蚁部落五</li>  
</ul> 
<input type="button" id="pre" value="获取上一个元素"/> 
<input type="button" id="next" value="获取下一个元素"/> 
</body> 
</html>

以上代码实现了我们的要求,比较简单,具体可以参阅相关阅读。
相关阅读:
1.text()函数jQuery的text()方法一章节。
2.eq()函数可以参阅jQuery的eq()方法一章节。
3.prev()函数可以参阅jQuery的prev()方法一章节。
4.next()函数可以参阅jQuery的next()方法一章节。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=13989

更多内容可以参阅:http://www.softwhy.com/jquery/

关于爱程序网 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助