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 相关文章推荐
jQuery最佳实践完整篇
Aug 20 Javascript
js数组的基本用法及数组根据下标(数值或字符)移除元素
Oct 20 Javascript
JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法
Apr 18 Javascript
jQuery.Callbacks()回调函数队列用法详解
Jun 14 Javascript
基于JavaScript代码实现自动生成表格
Jun 15 Javascript
防止Node.js中错误导致进程阻塞的办法
Aug 11 Javascript
Bootstrap4如何定制自己的颜色和风格
Feb 26 Javascript
解决Mac安装thrift因bison报错的问题
May 17 Javascript
Vue中的作用域CSS和CSS模块的区别
Oct 09 Javascript
深入浅析js原型链和vue构造函数
Oct 25 Javascript
vue element和nuxt的使用技巧分享
Jan 14 Vue.js
Angular性能优化之第三方组件和懒加载技术
May 10 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
站长助手-网站web在线管理程序 v1.0 下载
2007/05/12 PHP
PHP迭代器实现斐波纳契数列的函数
2013/11/12 PHP
php使用curl发送json格式数据实例
2013/12/17 PHP
PHP IDE PHPStorm配置支持友好Laravel代码提示方法
2015/05/12 PHP
PHP的CURL方法curl_setopt()函数案例介绍(抓取网页,POST数据)
2016/12/14 PHP
Ajax中的JSON格式与php传输过程全面解析
2017/11/14 PHP
前淘宝前端开发工程师阿当的PPT中有JS技术理念问题
2010/01/15 Javascript
Javascript 按位取反运算符 (~)
2014/02/04 Javascript
js 加密压缩出现bug解决方案
2014/11/25 Javascript
javascript动态创建链接的方法
2015/05/13 Javascript
JS获取本周周一,周末及获取任意时间的周一周末功能示例
2017/02/09 Javascript
Node.js如何实现注册邮箱激活功能 (常见)
2017/07/23 Javascript
Vue组件选项props实例详解
2017/08/18 Javascript
在vue中实现简单页面逆传值的方法
2017/11/27 Javascript
Angular项目从新建、打包到nginx部署全过程记录
2017/12/09 Javascript
AngularJS动态添加数据并删除的实例
2018/02/27 Javascript
AngularJS $http post 传递参数数据的方法
2018/10/09 Javascript
小程序实现页面顶部选项卡效果
2018/11/06 Javascript
mui js控制开关状态、修改switch开关的值方法
2019/09/03 Javascript
Vue实现兄弟组件间的联动效果
2020/01/21 Javascript
JavaScript中window和document用法详解
2020/07/28 Javascript
python自动化工具日志查询分析脚本代码实现
2013/11/26 Python
分享15个最受欢迎的Python开源框架
2014/07/13 Python
Python中用Spark模块的使用教程
2015/04/13 Python
解密Python中的描述符(descriptor)
2015/06/03 Python
使用Python写一个小游戏
2018/04/02 Python
Python使用pickle模块实现序列化功能示例
2018/07/13 Python
python输出数学符号实例
2020/05/11 Python
利用python控制Autocad:pyautocad方式
2020/06/01 Python
python 通过exifread读取照片信息
2020/12/24 Python
python 实现有道翻译功能
2021/02/26 Python
pytorch __init__、forward与__call__的用法小结
2021/02/27 Python
小学生保护环境倡议书
2014/05/15 职场文书
公司董事长岗位职责
2014/06/08 职场文书
党政领导班子群众路线对照检查材料思想汇报
2014/09/27 职场文书
调研报告的主要写法
2019/04/18 职场文书