JQuery中使用.each()遍历元素学习笔记


Posted in Javascript onNovember 08, 2014

今天写一个选项卡的时候,需要用到jquery中的.each(),通过获取each()中的index参数来获取li元素的编号,方便下面区块显示,在一个测试页面上写好了下面的代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

    <title>tab选项卡</title>

    <style type="text/css">

        ul,li{list-style: none;margin: 0px; padding: 0px;}

        li{float: left;width: 80px; height: 30px; background-color: #ccc; border: 2px solid #fff;text-align:center; line-height:30px;}

        #content{clear:left; width:336px; height: 180px; background-color: #999; color:white;}

        #content div{display: none}

        #content .consh{display: block;}

        #title .titsh{background-color: #999;border:2px solid #999; color:#fff}

    </style>

    <script type="text/javascript" src="jquery.js"></script>

    <script type="text/javascript">

        $(function(){

            $("li").each(function(index){

                $(this).mouseover(function(){

                    $("#title .titsh").removeClass("titsh");

                    $("#content .consh").removeClass("consh");

                    $(this).addClass("titsh");

                    $("#content>div:eq("+index+")").addClass("consh");

                })

            })                

        })

    </script>

</head>

<body>

    <div id="tab">

        <div id="title">

            <ul>

                <li class="titsh">选项一</li>

                <li>选项二</li>

                <li>选项三</li>

                <li>选项四</li>

            </ul>

        </div>

        <div id="content">

            <div class="consh">内容一</div>

            <div>内容二</div>

            <div>内容三</div>

            <div>内容四</div>

    </div>

</div>

</body>

</html>

测试的结果是正常,后来在一个实际使用的页面中使用的时候,发现上面的li列表变动的时候,下面的div区块不跟着变动不同的区块,以为是css样式和实际使用的页面中其他的样式冲突了,将css选择器全部改成独有的之后,发现还是这个问题,于是判断应该是这里:

$("#title .titsh").removeClass("titsh");

$("#content .consh").removeClass("consh");

$(this).addClass("titsh");

$("#content>div:eq("+index+")").addClass("consh");

第一句,第二句取出样式的时候,没有问题,第三局给当前的li标签加上titsh的css样式也正常,就是最后一句 给通过div:eq(index)获取到的div区块加样式的时候失败。

于是我在:

$("li").each(function(index){

$(this).mouseover(function(){

这两句之间加了一个alert(index)弹窗,看看效果,发现有10几个li标签的索引值被alert出来,一想原来实际这个页面中还有其他的li标签,所以导致each()迭代出来的索引值和下面div区块的索引值对应不上,这样上面li标签变动的时候,下面的div区块就不跟着变了,于是我将js代码改了一下:

<script type="text/javascript">

    $(function(){

          $("#title ul li").each(function(index){

            $(this).click(function(){

              $("#title .titsh").removeClass("titsh");

              $("#content .consh").removeClass("consh");

              $(this).addClass("titsh");

              $("#content > div:eq("+index+")").addClass("consh");

            })

          })                

        })

</script>

给要用.each()迭代的li元素的选择器加了限制,让他只能找我选项卡中的li标签来each出索引值,问题解决,可以睡觉了!

Javascript 相关文章推荐
Js 随机数产生6位数字
May 13 Javascript
关于extjs treepanel复选框选中父节点与子节点的问题
Apr 02 Javascript
javascript记录文本框内文字个数检测文字个数变化
Oct 14 Javascript
javascript实现复选框超过限制即弹出警告框的方法
Feb 25 Javascript
js限制文本框只能输入整数或者带小数点的数字
Apr 27 Javascript
javascript入门教程基础篇
Nov 16 Javascript
AngularJS路由切换实现方法分析
Mar 17 Javascript
JavaScript实现提交模式窗口后刷新父窗口数据的方法
Jun 16 Javascript
用Vue.extend构建消息提示组件的方法实例
Aug 08 Javascript
详解Vue.js自定义tipOnce指令用法实例
Dec 19 Javascript
微信小程序顶部导航栏滑动tab效果
Jan 28 Javascript
如何使用three.js 制作一个三维的推箱子游戏
Jul 29 Javascript
jQuery遍历之next()、nextAll()方法使用实例
Nov 08 #Javascript
jQuery遍历对象、数组、集合实例
Nov 08 #Javascript
JavaScript中具名函数的多种调用方式总结
Nov 08 #Javascript
JavaScript中使用typeof运算符需要注意的几个坑
Nov 08 #Javascript
JavaScript中判断整数的多种方法总结
Nov 08 #Javascript
JavaScript中判断整字类型最简洁的实现方法
Nov 08 #Javascript
JavaScript中的索引数组、关联数组和静态数组、动态数组讲解
Nov 08 #Javascript
You might like
PDO防注入原理分析以及使用PDO的注意事项总结
2014/10/23 PHP
详解PHP序列化和反序列化原理
2018/01/15 PHP
PHP ajax+jQuery 实现批量删除功能实例代码小结
2018/12/06 PHP
php+iframe 实现上传文件功能示例
2020/03/04 PHP
用javascript实现的支持lrc歌词的播放器
2007/05/17 Javascript
JavaScript 解析Json字符串的性能比较分析代码
2009/12/16 Javascript
结合JQ1.9通过js正则判断各种浏览器版本的方法
2013/12/30 Javascript
使用typeof方法判断undefined类型
2014/09/09 Javascript
Nodejs全局安装和本地安装的不同之处
2016/07/04 NodeJs
利用vue写todolist单页应用
2016/12/15 Javascript
详解如何使用Vue2做服务端渲染
2017/03/29 Javascript
详解node.js搭建代理服务器请求数据
2017/04/08 Javascript
Vue.js常用指令之循环使用v-for指令教程
2017/06/27 Javascript
解决vue-router在同一个路由下切换,取不到变化的路由参数问题
2018/09/01 Javascript
微信小程序时间轴实现方法示例
2019/01/14 Javascript
15分钟上手vue3.0(小结)
2020/05/20 Javascript
Vue-CLI 3 scp2自动部署项目至服务器的方法
2020/07/24 Javascript
Python利用多进程将大量数据放入有限内存的教程
2015/04/01 Python
在Python中处理字符串之isdecimal()方法的使用
2015/05/20 Python
python+selenium实现简历自动刷新的示例代码
2019/05/20 Python
使用浏览器访问python写的服务器程序
2019/10/10 Python
Python imutils 填充图片周边为黑色的实现
2020/01/19 Python
python如何删除列为空的行
2020/07/17 Python
英国领先的男士美容护发用品公司:Mankind
2016/08/31 全球购物
西班牙汉普顿小姐:购买帆布鞋和太阳镜
2016/10/23 全球购物
小女主人连衣裙:Little Mistress
2017/07/10 全球购物
捷克母婴用品购物网站:Feedo.cz
2020/12/28 全球购物
explicit和implicit的含义
2012/11/15 面试题
暑假实习求职信范文
2013/09/22 职场文书
个性与发展自我评价
2014/02/11 职场文书
运动会入场式解说词
2014/02/18 职场文书
如何撰写一封出色的求职信
2014/04/27 职场文书
欢度春节标语
2014/07/01 职场文书
辞职信格式模板
2015/02/27 职场文书
唐山大地震的观后感
2015/06/05 职场文书
圣诞晚会主持词
2015/07/01 职场文书