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正确获取元素样式详解
Aug 07 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(二)人物行走的实现
Jan 23 Javascript
jQuery中.live()方法的用法深入解析
Dec 30 Javascript
jquery实现textarea 高度自适应
Mar 11 Javascript
JSON遍历方式实例总结
Dec 07 Javascript
利用jQuery+localStorage实现一个简易的计时器示例代码
Dec 25 jQuery
AngularJS 事件发布机制
Aug 28 Javascript
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
Oct 12 Javascript
checkbox在vue中的用法小结
Nov 13 Javascript
layui实现下拉框三级联动
Jul 26 Javascript
javascript实现弹幕墙效果
Nov 28 Javascript
jQuery实现移动端下拉展现新的内容回弹动画
Jun 24 jQuery
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
PHP开发框架Laravel数据库操作方法总结
2014/09/03 PHP
php获取本周开始日期和结束日期的方法
2015/03/09 PHP
php判断对象是派生自哪个类的方法
2015/06/20 PHP
CI配置多数据库访问的方法
2016/03/28 PHP
laravel框架模型和数据库基础操作实例详解
2020/01/25 PHP
动态加载图片路径 保持JavaScript控件的相对独立性
2010/09/06 Javascript
javascript 学习笔记(八)javascript对象
2011/04/12 Javascript
利用jquery的获取JS文件中的字符串内容
2012/02/14 Javascript
Js控制弹窗实现在任意分辨率下居中显示
2013/08/01 Javascript
一段非常简单的js判断浏览器的内核
2014/08/17 Javascript
Javascript中typeof 用法小结
2015/05/12 Javascript
JavaScript的类型、值和变量小结
2015/07/09 Javascript
三种带箭头提示框总结实例
2016/06/14 Javascript
JS动态给对象添加事件的简单方法
2016/07/19 Javascript
node实现分片下载的示例代码
2018/10/17 Javascript
vue实现类似淘宝商品评价页面星级评价及上传多张图片功能
2018/10/29 Javascript
微信小程序如何获取用户头像和昵称
2019/09/23 Javascript
vue+AI智能机器人回复功能实现
2020/07/16 Javascript
解决Can't find variable: SockJS vue项目的问题
2020/09/22 Javascript
Vue+scss白天和夜间模式切换功能的实现方法
2021/01/05 Vue.js
[01:02:25]2014 DOTA2华西杯精英邀请赛 5 24 iG VS DK
2014/05/26 DOTA
[01:06:26]全国守擂赛第二周 Team Coach vs DeMonsTer
2020/04/28 DOTA
python 随机数生成的代码的详细分析
2011/05/15 Python
python微信撤回监测代码
2019/04/29 Python
Python tkinter实现图片标注功能(完整代码)
2019/12/08 Python
python标准库sys和OS的函数使用方法与实例详解
2020/02/12 Python
程序运行正确, 但退出时却"core dump"了,怎么回事
2014/02/19 面试题
施惠特软件测试面试题以及笔试题
2015/05/13 面试题
电子商务自荐书范文
2014/01/04 职场文书
活动总结格式范文
2014/04/26 职场文书
好书伴我成长演讲稿
2014/05/14 职场文书
基层党员对照检查材料
2014/09/24 职场文书
党员个人剖析材料
2014/09/30 职场文书
pytorch训练神经网络爆内存的解决方案
2021/05/22 Python
POST提交数据常见的四种方式
2022/01/18 HTML / CSS
Mysql忘记密码解决方法
2022/02/12 MySQL