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

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

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

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

<!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">內(nèi)容一</div>

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

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

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

    </div>

</div>

</body>

</html>

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

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

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

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

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

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

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

于是我在：

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

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

$(this).mouseover(function(){

這兩句之間加了一個alert（index）彈窗，看看效果，發(fā)現(xiàn)有10幾個li標(biāo)簽的索引值被alert出來，一想原來實際這個頁面中還有其他的li標(biāo)簽，所以導(dǎo)致each（）迭代出來的索引值和下面div區(qū)塊的索引值對應(yīng)不上，這樣上面li標(biāo)簽變動的時候，下面的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元素的選擇器加了限制，讓他只能找我選項卡中的li標(biāo)簽來each出索引值，問題解決，可以睡覺了！

您可能感興趣的文章: