jquery获取当前元素索引值用法实例


Posted in Javascript onJune 10, 2015

本文实例讲述了jquery获取当前元素索引值用法。分享给大家供大家参考。具体如下:

今天在做促销页面的图片轮转效果时,下方页码的左边需要对应显示图片的说明信息,效果如下:

jquery获取当前元素索引值用法实例

思路:

页面部分当为当前状态的时候,会添加“active”样式。

通过获取 li class="active" 的索引值,对应找到相应的图片说明信息,显示出来。

解决:

通过jquery的 index() 可以很轻松的实现该效果。

代码如下:

HTML:

<div id="carousel"> 
  <div id="carouselimg"> 
 <div id="imgcontainer"> 
   <a href="#" mce_href="#"><img src="" /></a> 
   <a href="#" mce_href="#"><img src="" /></a> 
   <a href="#" mce_href="#"><img src="" /></a> 
   <a href="#" mce_href="#"><img src="" /></a> 
   <a href="#" mce_href="#"><img src="" /></a> 
 </div> 
  </div> 
  <div id="carouseltitle"> 
 <div class="carouseltext"> 
   <span> </span> 
   <span> </span> 
   <span> </span> 
   <span> </span> 
   <span> </span> 
 </div> 
 <ul> 
   <li><span>1</span></li> 
   <li><span>2</span></li> 
   <li><span>3</span></li> 
   <li><span>4</span></li> 
   <li><span>5</span></li> 
 </ul> 
  </div> 
</div>

JavaScript:

<SCRIPT src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" mce_src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></SCRIPT> 
<SCRIPT type=text/javascript>  
var carousedata = [ 
  {index:0,link:"http://www.dangdang.com",imgsrc:"1.jpg",text:"数千款名品手机6折起"}, 
  {index:1,link:"http://www.baidu.com",imgsrc:"2.jpg",text:"测试文本2"}, 
  {index:2,link:"http://www.google.com",imgsrc:"3.jpg",text:"测试文本3"}, 
  {index:3,link:"http://www.soso.com",imgsrc:"xf.jpg",text:"测试文本4"}, 
  {index:4,link:"https://3water.com",imgsrc:"py.jpg",text:"测试文本5"} 
]; 
$(document).ready(function(){ 
  $("#imgcontainer a").each(function(i){ 
 $(this).attr("href",carousedata[i].link); 
 $(this).children("img").attr("src",carousedata[i].imgsrc); 
  }); 
  $(".carouseltext span").each(function(i){ 
 $(this).text(carousedata[i].text); 
  }) 
  setInterval(function(){ 
 var li_index = $("#carouseltitle ul li").index($("#carouseltitle ul li.active")[0]); 
 $(".carouseltext span").hide(); 
 $(".carouseltext span").eq(li_index).show(); 
  },10); 
}); 
</script>

这里,我使用setinterval ,没10ms查找一次。

该代码还有可以优化的地方。

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
Javascript中的arguments对象
Jun 20 Javascript
Angular 应用技巧总结
Sep 14 Javascript
微信小程序 教程之条件渲染
Oct 18 Javascript
使用Javascript监控前端相关数据的代码
Oct 27 Javascript
如何处理JSON中的特殊字符
Nov 30 Javascript
JS ES6多行字符串与连接字符串的表示方法
Apr 26 Javascript
JavaScript实现精美个性导航栏筋斗云效果
Oct 29 Javascript
JavaScript判断日期时间差的实例代码
Mar 01 Javascript
JS表格的动态操作完整示例
Jan 13 Javascript
VSCode 配置uni-app的方法
Jul 11 Javascript
解决vue项目router切换太慢问题
Jul 19 Javascript
微信小程序基础教程之echart的使用
Jun 01 Javascript
jQuery实现checkbox全选的方法
Jun 10 #Javascript
JavaScript中的getTime()方法使用详解
Jun 10 #Javascript
简介JavaScript中的getSeconds()方法的使用
Jun 10 #Javascript
在JavaScript中操作时间之getMonth()方法的使用
Jun 10 #Javascript
在JavaScript中用getMinutes()方法返回指定的分时刻
Jun 10 #Javascript
JavaScript中的getMilliseconds()方法使用详解
Jun 10 #Javascript
在JavaScript中处理时间之getHours()方法的使用
Jun 10 #Javascript
You might like
同一空间绑定多个域名而实现访问不同页面的PHP代码
2006/12/06 PHP
PHP Header失效的原因分析及解决方法
2016/11/16 PHP
在chrome中window.onload事件的一些问题
2010/03/01 Javascript
js中对象的声明方式以及数组的一些用法示例
2013/12/11 Javascript
javascript和jquery修改a标签的href属性
2013/12/16 Javascript
javascript中的循环语句for语句深入理解
2014/04/04 Javascript
javascript实现检验的各种规则
2015/07/31 Javascript
jQuery实现图片上传和裁剪插件Croppie
2015/11/29 Javascript
Vue.js教程之计算属性
2016/11/11 Javascript
Vue实现选择城市功能
2017/05/27 Javascript
详解nodejs的express如何自动生成项目框架
2017/07/12 NodeJs
Angular5升级RxJS到5.5.3报错:EmptyError: no elements in sequence的解决方法
2018/04/09 Javascript
js实现倒计时器自定义时间和暂停
2019/02/25 Javascript
解决layui表格的表头不滚动的问题
2019/09/04 Javascript
TypeScript之调用栈的实现
2019/12/31 Javascript
Javascript作用域和作用域链原理解析
2020/03/03 Javascript
Ant design vue table 单击行选中 勾选checkbox教程
2020/10/24 Javascript
VUE前端从后台请求过来的数据进行转换数据结构操作
2020/11/11 Javascript
python字典序问题实例
2014/09/26 Python
Python中urllib2模块的8个使用细节分享
2015/01/01 Python
Python与shell的3种交互方式介绍
2015/04/11 Python
对python sklearn one-hot编码详解
2018/07/10 Python
python操作excel的方法
2018/08/16 Python
Python异步操作MySQL示例【使用aiomysql】
2019/05/16 Python
Python unittest工作原理和使用过程解析
2020/02/24 Python
django之导入并执行自定义的函数模块图解
2020/04/01 Python
Python xlrd模块导入过程及常用操作
2020/06/10 Python
使用PyWeChatSpy自动回复微信拍一拍功能的实现代码
2020/07/02 Python
薇姿法国官网:Vichy法国
2021/01/28 全球购物
大学毕业感言
2014/01/10 职场文书
机关干部四风问题自我剖析及整改措施
2014/10/26 职场文书
民事赔偿协议书
2014/11/02 职场文书
2015关爱留守儿童工作总结
2014/12/12 职场文书
主持人开场白台词
2015/05/29 职场文书
用Python可视化新冠疫情数据
2022/01/18 Python
Python学习之os包使用教程详解
2022/03/21 Python