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 相关文章推荐
javascript表单验证 - Parsley.js使用和配置
Jan 25 Javascript
javascript中interval与setTimeOut的区别示例介绍
Mar 14 Javascript
原生js和jquery实现图片轮播特效
Apr 23 Javascript
JavaScript实现图片DIV竖向滑动的方法
Apr 25 Javascript
JS特效实现图片自动播放并可控的效果
Jul 31 Javascript
JavaScript多线程详解
Aug 12 Javascript
js格式化输入框内金额、银行卡号
Feb 01 Javascript
jquery实现一个简单的表单验证实例
Mar 30 Javascript
从零开始学习Node.js系列教程五:服务器监听方法示例
Apr 13 Javascript
angular ng-model 无法获取值的处理方法
Oct 02 Javascript
vue 属性拦截实现双向绑定的实例代码
Oct 24 Javascript
小程序开发踩坑:页面窗口定位(相对于浏览器定位)(推荐)
Apr 25 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
Zend Framework开发入门经典教程
2016/03/23 PHP
laravel ORM 只开启created_at的几种方法总结
2018/01/29 PHP
ThinkPHP5.1框架页面跳转及修改跳转页面模版示例
2019/05/06 PHP
让插入到 innerHTML 中的 script 跑起来的实现代码
2006/07/01 Javascript
捕获关闭窗口的脚本
2009/01/10 Javascript
javascript取消文本选定的实现代码
2010/11/14 Javascript
js/html光标定位的实现代码
2013/09/23 Javascript
JQ获取动态加载的图片大小的正确方法分享
2013/11/08 Javascript
javascript实用小函数使用介绍
2013/11/11 Javascript
js判断当页面无法回退时关闭网页否则就history.go(-1)
2014/08/07 Javascript
基于jQuery实现多层次的手风琴效果附源码
2015/09/21 Javascript
javaScript事件机制兼容【详细整理】
2016/07/23 Javascript
jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)
2016/08/23 Javascript
Jquery 整理元素选取、常用方法一览表
2016/11/26 Javascript
jquery获取select,option所有的value和text的实例
2017/03/06 Javascript
javascript数组拍平方法总结
2018/01/20 Javascript
浅析JS中什么是自定义react数据验证组件
2018/10/19 Javascript
微信小程序中使用echarts的实现方法
2019/04/24 Javascript
JavaScript设计模式---单例模式详解【四种基本形式】
2020/05/16 Javascript
python实现多线程的方式及多条命令并发执行
2016/06/07 Python
Python实现购物系统(示例讲解)
2017/09/13 Python
使用Python的turtle模块画图的方法
2017/11/15 Python
详解pyqt5 动画在QThread线程中无法运行问题
2018/05/05 Python
树莓派使用python-librtmp实现rtmp推流h264的方法
2019/07/22 Python
python 图片二值化处理(处理后为纯黑白的图片)
2019/11/01 Python
Python中的引用和拷贝实例解析
2019/11/14 Python
python 比较字典value的最大值的几种方法
2020/04/17 Python
Nike法国官方网站:Nike.com FR
2018/07/22 全球购物
世界上第一个创建了罩杯系统的美国内衣品牌:Maidenform
2019/03/23 全球购物
美国户外服装和装备购物网站:Outland USA
2020/03/22 全球购物
心得体会范文
2014/01/04 职场文书
机关作风建设工作总结
2014/10/23 职场文书
市级三好学生评语
2014/12/29 职场文书
导游词之潮音寺
2019/09/26 职场文书
mysql字符串截取函数小结
2021/04/05 MySQL
Vertica集成Apache Hudi重磅使用指南
2022/03/31 Servers