使用jQuery遍历子列表

我试图制作丰富多彩的菜单。假设顶层节点是红色的 - 所以它的子节点也会变成浅红色，在绿色顶端项下 - 浅绿色等等。使用jQuery遍历子列表

我有一个颜色数组（黑暗与光明）和一个嵌套列表对象。

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

这是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

来源

2012-05-16 Amihay Dvir

在此位：$(this).children("li>a")，this是<a> ，没有孩子。您需要$(this).parent().children("li>a")。

UPDATE

这可能是你想要什么，然后：http://jsfiddle.net/7TjfC/1/

来源

2012-05-16 19:37:02

我已经试过了。它不起作用 - 而不是着色儿童子菜单 - 它再次为顶级项目着色（这次使用淡色）。 –

感谢您的更新。它正在工作，但悬停CSS（.mainMenu li a：hover）的悬停背景颜色不起作用。我想这是因为我强制它背景颜色。任何想法？ –

// 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; 
}

来源

2012-05-16 20:42:59 strah

谢谢。它正在工作 –

使用jQuery遍历子列表

回答

相关问题