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

今天写一个选项卡的时候，需要用到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出索引值，问题解决，可以睡觉了！

赞 (0)

相关推荐

  • jQuery遍历DOM节点操作之filter()方法详解

    本文实例分析了jQuery遍历DOM节点操作之filter()方法.分享给大家供大家参考,具体如下: .filter(selector) 此方法用于在匹配元素中按照选择器表达式进行筛选. 记住:使用此方法必须得传入选择器表达式参数,不然会报错"'nodeType' 为空或不是对象" 另外请注意这个filter方法和jquery中的find方法的区别: filter方法是对匹配元素进行筛选,而find方法是对匹配元素的后代元素进行筛选. 从jquery1.4版本开始,filter方法又添

  • 举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历

    一.jQuery的向下遍历 <script src="../JS/Extend.js"></script> <script src="../JS/my.js"></script> <link type="text/css" rel="stylesheet" href="../CSS3/my.css"> </head> <body&

  • jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别

    在这个sprint中,因为要写前端UI,所以用到了jQuery,但是jQuery在向上遍历DOM树的API中,有parents(). parent().closest()这几个,一直不太清楚它们具体的区别,所以狠下心好好读了一下jQuery的API文档,并把区别记在这里,以供参考.  1.parents([selector]) 本方法用于选择给定jQuery对象中包含的DOM元素或者DOM元素集的祖先节点,并将这些节点包装成jQuery对象返回,返回的节点集是以从里到外的顺序排序的. 同时,本方

  • 基于jQuery的遍历同id元素 并响应事件的代码

    完整测试代码: 复制代码 代码如下: <!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"> <head> <meta http-e

  • jQuery基于当前元素进行下一步的遍历

    如果我们已经通过jQuery方法选中了一组元素,那么如何基于这些已经选中的元素进行下一步的遍历呢? 例如,我们通过 $('li:eq(1)') 选中了以下代码中的第二个li元素. 复制代码 代码如下: <ul> <li><a href="#">link</a></li> <li><a href="#">selected link</a></li> <li

  • JS Jquery 遍历,筛选页面元素 自动完成(实现代码)

    复制代码 代码如下: <script>        var value = "teset";        var s = new RegExp(value, "i")//I 表示不区分大小写(可省略)        $(".lico").each(function (i, n) {    //lico为所有li列表的class名 遍历            if (s.test($(n).text()))  //筛选成功     

  • jquery遍历select元素(实例讲解)

    本篇文章提供一款jquery遍历select教程代码,主要是利用了$("#<%=ddl_xreg_id.clientid%> option").each(function() {形式来each遍历一次,这样所有的select就给查询了一次. 复制代码 代码如下: <script src="jquery-1.2.1.js" type="text/网页特效"></script><script language

  • JQuery 两种方法解决刚创建的元素遍历不到的问题

    刚创建的元素,使用jQuery的each方法来遍历,有时候会不起作用. 原因不用多说,经常使用javascript的人应该都会知道,解决方案大致有2种: 1.刚创建完元素的时候,就立刻使用each方法 复制代码 代码如下: $('#btn').on("click", function(){     $('#div').append("<input type='text' />");     $("input").each(functi

  • jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结

    jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结

    如下图,显示了HTML中的结构树,通过 JQuery 遍历,您能够从被选(当前的)元素开始,轻松地在家族树中向上移动(祖先),向下移动(子孙),水平移动(同胞).这种移动被称为对 DOM 进行遍历. 遍历 - 父级(祖先) 向上遍历DOM数. 通过如下三个方法,我们可以获取父级元素: parent() parents() parentsUntil() 1.JQuery parent() parent() 方法返回被选元素的直接父元素. 该方法只会向上一级对 DOM 树进行遍历. <section

  • jQuery遍历DOM元素与节点方法详解

    本文实例讲述了jQuery遍历DOM元素与节点方法.分享给大家供大家参考,具体如下: 一.向上遍历--祖先元素 ① $(selector).parent([filter]):返回selector匹配元素的直接父元素,方法可以接受一个过滤selector来过滤返回的父元素. ② $(selector).parents([filter]):返回匹配元素的所有祖先节点,一直向上直到文档根元素html,方法可以接受一个过滤selector来过滤返回的祖先节点. 备注:parent与parents的区别,

随机推荐