使用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遍歷子列表

回答

相關問題