龙盟编程博客 | 无障碍搜索 | 云盘搜索神器
快速搜索
主页 > web编程 > Javascript编程 >

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

时间:2014-11-09 03:05来源:网络整理 作者:网络 点击:
分享到:
第一句,第二句取出样式的时候,没有问题,第三局给当前的li标签加上titsh的css样式也正常,就是最后一句 给通过div:eq(index)获取到的div区块加样式的

第一句,第二句取出样式的时候,没有问题,第三局给当前的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出索引值,问题解决,可以睡觉了!

精彩图集

赞助商链接