jQuery 两重循环

随便学过程序的人肯定会这样的写法
for(i=0; i<5; i++){
   for(j=0; j<5; j++){
   //do some thing}
}
这样的两重循环 经常用 在JQ 里面 循环就像是隐式的 看不到 i< i++ 之类的

但是设想 你有 N个同样的 子元素 每个子元素里面又包含M个子子元素 如何遍历他们并且执行相应操作呢？ 这个问题也同样出现在解析XML 里面。今天闲着没事就自己写了一个两重的循环 解决了一个信息切换的问题

下面的代码用了 两次 each 分别对外层的dl 和 每个dl 下面的dd 遍历 需要注意的是每个each的序列分别为 i和 j 。有时候就顺手写.each(function(i){}) 这样序列就一样了 引起了混乱。所以一定要注意 。本身这个例子没有什么 只是提示了两重 或者多重循环的 计数器变量问题 有这个思路 你就可以写N重的循环了。

解释一下下面脚本的意思：

.comm 下的dl 的每一个dd 经过的时候 其dt 里面相应序列的a标签显示 其他的隐藏 由此造成了一个切换效果 这样的好处是 .comm 下面无论多少个dl 都正常转 而且各转各的 因为我给dl 进行了一重循环遍历 哎。。jQuery 的选择器和连操作真强大啊

jQuery(document).ready(function(){
    jQuery(".comm dl").each(function(i){
    jQuery(".comm dl").eq(i).find("dd").each(function(j){
     jQuery(".comm dl").eq(i).find("dd").eq(j).mouseover(function(){
     jQuery(".comm dl").eq(i).find("dt").find("a").eq(j).show().siblings().hide()              
     })            
    })       
   })  
})

结构：

<div class="comm">
          <h2>名家评论</h2>
            <dl>
                <dt>
                <a href="#nogo"><img src="images/temp/03.jpg" alt="" /><span>点内贾德浮动</span></a>
                    <a href="#nogo"><img src="images/temp/03.jpg" alt="" /><span>第二条新闻</span></a>
                    <a href="#nogo"><img src="images/temp/02.jpg" alt="" /><span>第三条新闻</span></a>
                    <a href="#nogo"><img src="images/temp/03.jpg" alt="" /><span>这是四条新闻</span></a>
                    <a href="#nogo"><img src="images/temp/03.jpg" alt="" /><span>第五条新闻了</span></a>
                </dt>
                <dd><a href="#nogo">去体坛群星闪耀福布斯名榜布名人</a></dd>
                <dd><a href="#nogo">周杰伦北京奥运主歌出布名人炉 </a></dd>
                <dd><a href="#nogo">首批奥运候名人选保安月薪1000</a></dd>
                <dd><a href="#nogo">奥运冠军2布斯名人0年已翻33倍 </a></dd>
                <dd><a href="#nogo">奥运冠军2布斯名人0年已翻33倍 </a></dd>
            </dl>
            <dl>
                <dt>
                <a href="#nogo"><img src="images/temp/03.jpg" alt="" /><span>点内贾德浮动</span></a>
                    <a href="#nogo"><img src="images/temp/03.jpg" alt="" /><span>第二条新闻</span></a>
                    <a href="#nogo"><img src="images/temp/02.jpg" alt="" /><span>第三条新闻</span></a>
                    <a href="#nogo"><img src="images/temp/03.jpg" alt="" /><span>这是四条新闻</span></a>
                    <a href="#nogo"><img src="images/temp/03.jpg" alt="" /><span>第五条新闻了</span></a>
                </dt>
                <dd><a href="#nogo">去体坛群星闪耀福布斯名榜布名人</a></dd>
                <dd><a href="#nogo">周杰伦北京奥运主歌出布名人炉 </a></dd>
                <dd><a href="#nogo">首批奥运候名人选保安月薪1000</a></dd>
                <dd><a href="#nogo">奥运冠军2布斯名人0年已翻33倍 </a></dd>
                <dd><a href="#nogo">奥运冠军2布斯名人0年已翻33倍 </a></dd>
            </dl>
           
          </div>

样式：

.comm dl{ padding:10px 10px 0; height:96px; display:block; clear:both;overflow:hidden;}}
.comm dt a{ display:block;}
.comm dt{ float:left; margin-right:10px;
.comm dt img{ width:75px; height:75px; border:1px solid #000;}
.comm dd { float:left; padding-left:10px; background:url(../img/ico/001.gif) 0 8px no-repeat; height:20px; line-height:20px; }
.comm dd a{ float:left; text-align:left; width:170px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}