快捷導(dǎo)航

JQuery中使用.each()遍歷元素學(xué)習(xí)筆記

更新時(shí)間：2014年11月08日 11:53:22 投稿：junjie

這篇文章主要介紹了jquery中使用.each()遍歷元素學(xué)習(xí)筆記,本文從實(shí)際項(xiàng)目經(jīng)驗(yàn)總結(jié)而來(lái),需要的朋友可以參考下

今天寫(xiě)一個(gè)選項(xiàng)卡的時(shí)候，需要用到j(luò)query中的.each(),通過(guò)獲取each()中的index參數(shù)來(lái)獲取li元素的編號(hào)，方便下面區(qū)塊顯示，在一個(gè)測(cè)試頁(yè)面上寫(xiě)好了下面的代碼：

復(fù)制代碼代碼如下:

<!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選項(xiàng)卡</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">選項(xiàng)一</li>

                <li>選項(xiàng)二</li>

                <li>選項(xiàng)三</li>

                <li>選項(xiàng)四</li>

            </ul>

        </div>

        <div id="content">

            <div class="consh">內(nèi)容一</div>

            <div>內(nèi)容二</div>

            <div>內(nèi)容三</div>

            <div>內(nèi)容四</div>

    </div>

</div>

</body>

</html>

測(cè)試的結(jié)果是正常，后來(lái)在一個(gè)實(shí)際使用的頁(yè)面中使用的時(shí)候，發(fā)現(xiàn)上面的li列表變動(dòng)的時(shí)候，下面的div區(qū)塊不跟著變動(dòng)不同的區(qū)塊，以為是css樣式和實(shí)際使用的頁(yè)面中其他的樣式?jīng)_突了，將css選擇器全部改成獨(dú)有的之后，發(fā)現(xiàn)還是這個(gè)問(wèn)題，于是判斷應(yīng)該是這里：

復(fù)制代碼代碼如下:

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

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

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

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

第一句，第二句取出樣式的時(shí)候，沒(méi)有問(wèn)題，第三局給當(dāng)前的li標(biāo)簽加上titsh的css樣式也正常，就是最后一句給通過(guò)div：eq（index）獲取到的div區(qū)塊加樣式的時(shí)候失敗。

于是我在：

復(fù)制代碼代碼如下:

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

$(this).mouseover(function(){

這兩句之間加了一個(gè)alert（index）彈窗，看看效果，發(fā)現(xiàn)有10幾個(gè)li標(biāo)簽的索引值被alert出來(lái)，一想原來(lái)實(shí)際這個(gè)頁(yè)面中還有其他的li標(biāo)簽，所以導(dǎo)致each（）迭代出來(lái)的索引值和下面div區(qū)塊的索引值對(duì)應(yīng)不上，這樣上面li標(biāo)簽變動(dòng)的時(shí)候，下面的div區(qū)塊就不跟著變了，于是我將js代碼改了一下：

復(fù)制代碼代碼如下:

<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元素的選擇器加了限制，讓他只能找我選項(xiàng)卡中的li標(biāo)簽來(lái)each出索引值，問(wèn)題解決，可以睡覺(jué)了！

您可能感興趣的文章: