随便学过程序的人肯定会这样的写法 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;}
