使用jQuery循环遍历子列表答案

【问题标题】：Looping through child list using jQuery使用jQuery循环遍历子列表
【发布时间】：2012-05-16 19:04:53
【问题描述】：

我正在尝试制作丰富多彩的菜单。假设顶部节点是红色的 - 所以它的子节点也将是浅红色，在绿色顶部项目下方 - 浅绿色等等。

我有一个颜色数组（深色和浅色）和一个嵌套列表对象。

顶级着色正在工作，但我无法让它在子对象上工作。

这是html：

<!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">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.mainMenu {
    float: left;
    width: 140px;
    margin-left:10px;

    list-style:none;

    padding:0;
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    font-weight:bold;

}
.mainMenu li a {
    display: block;
    padding: 10px 25px;
    background: #F90  ;
    margin-top:3px;

    text-decoration: none;
   color:#FFF;
   text-align:right;
}
.mainMenu li a:hover, .mainMenu li a.active {
    background: #999;
    color: #fff;
    list-style:none;
}
.mainMenu li ul {
   display: none; // used to hide sub-menus
   list-style:none;
   padding-left:3px;
}
.mainMenu li ul li a {
    padding: 2px 25px;
    background:#f7d8ba   ;
    border-bottom: 1px dotted #ccc;
    color:#000;
    font-size:12px;
    font-weight:normal;
    margin-top:4px;
}
</style>
</head>

<body>

<ul class="mainMenu">
    <li><a href="#">Board</a>
        <ul>
          <li><a href="#">Selling</a></li>
            <li><a href="#">Buying</a></li>
            <li><a href="#">Wanted</a></li>
            <li><a href="#">Dating</a></li>
        </ul>
    </li>

    <li><a href="#">Phone Book</a>
        <ul>
            <li><a href="#">Office</a></li>
            <li><a href="#">People</a></li>
            <li><a href="#">Marketing</a></li>
        </ul>
    </li>

    <li><a href="#">Schedual</a>
        <ul>
             <li><a href="#">Busses</a></li>
            <li><a href="#">Pharmacy</a></li>
            <li><a href="#">Other</a></li>  
        </ul>  
    </li>

  <li><a href="#">Another</a></li>
      <li><a href="#">One</a></li>
       <li><a href="#">Here</a></li>
</ul>   

</body>
</html>

这是 Jquery：

<script>

var colorsDarkTable = ["#f6921e","#c0272d","#8bc53f","#006837","#29aae1","#2959e1"];
var colorsLightTable = ["#f7d8ba","#f6d5d6","#e8f3d9","#cdeadc","#d4eef9","#d4def9"];

$(document).ready(function () {
  $('.mainMenu > li > a').hover(function(){

    if ($(this).attr('class') != 'active'){
        $('.mainMenu li ul').slideUp();
        $(this).next().css("listStyle","none");
        $(this).next().slideToggle();
        $('.mainMenu li a').removeClass('active');
        $(this).addClass('active');
    }
  });

        $("ul.mainMenu>li>a").each(function() {
                var $parentLi = $(this).parent()
                var myIndex = $parentLi.index();

        // This is working!      
        $(this).css("backgroundColor", colorsDarkTable[myIndex]);

        // This sub loop isn't working ***
        $(this).children("li>a").each(function(index) {
           $(this).parent().css("backgroundColor",colorsLightTable[myIndex]);
        });
     });
});
</script>

这里是演示： http://www.dvirad.co.il/test.html

【问题讨论】：

标签： jquery colors nested-lists

【解决方案1】：

在这个位：$(this).children("li>a")，this 是<a>，它没有孩子。

你需要$(this).parent().children("li>a")。

更新

这可能就是你想要的：http://jsfiddle.net/7TjfC/1/

【讨论】：

我试过了。它不起作用 - 而不是为子子菜单着色 - 它再次为顶级项目着色（这次只是用浅色）。
感谢您的更新。它正在工作，但现在悬停 css (.mainMenu li a:hover) 的悬停背景颜色不起作用。我想这是因为我强迫它成为背景颜色。有什么想法吗？

【解决方案2】：

// This sub loop is now working ***
    console.log($(this).parent().children("ul").find("li a"))
    $(this).parent().children("ul").find("li a")
                             .css("backgroundColor", colorsLightTable[myIndex])

http://jsfiddle.net/52QDc/1/

修复背景：

.mainMenu li a:hover, .mainMenu li a.active {
    background: #999 !important;
}

【讨论】：