使用Jquery遍歷錨點，未排序列表和子列表元素

我正在學習JQuery，並試圖理解如何解析未排序的列表。我的腳本的作品，它可以突出顯示在黃色的子列表（點擊「2C級」和2D錨點），但我無法突出顯示只有級別3或只有級別4.使用Jquery遍歷錨點，未排序列表和子列表元素

任何線索如何做到這一點？謝謝。

這裏是我的代碼：

<script type="text/javascript" language="JavaScript"> 
    $(document).ready(function(){ 

     $(".level2").click(function(){ 
      $(this).next("ul").css("background", "yellow"); 
      }); 

    });

<div > 
    <ul> 
    <li ><a class="level1">Level 1</a> 
     <ul> 
     <li><a class="level2" href="#">Level 2a</a></li> 
     <li><a class="level2" href="#">Level 2b</a></li> 
     <li><a class="level2">Level 2c</a> 
      <ul> 
      <li><a class="level3" href="#">Level 3a</a></li> 
      <li><a class="level3">Level 3b</a> 
       <ul> 
       <li><a class="level4">Level 4a</a></li> 
       <li><a class="level4">Level 4b</a></li> 
       </ul> 
      </li> 
      <li><a class="level3">Level 3c</a> 
       <ul> 
       <li><a class="level4">Level 4c</a></li> 
       <li><a class="level4">Level 4d</a></li> 
       </ul> 
      </li> 
      </ul> 
     </li> 
     <li><a class="level2">Level 2d</a> 
      <ul> 
      <li><a class="level3" href="#">Level 3c</a></li> 
      <li><a class="level3">Level 3d</a> 
       <ul> 
       <li><a class="level4" href="#">Level 4e</a></li> 
       <li><a class="level4" href="#">Level 4f</a></li> 
       </ul> 
      </li> 
      </ul> 
     </li> 
     </ul> 
    </li> 
    </ul> 
</div>

對不起，我是法國人！

來源

2010-10-20 Jim D

4嵌套在3中，因此很難通過選擇「only」3來確定你的意思，因爲通過選擇3，你會自動選擇4. – 2010-10-20 17:45:15

嗨，彼得。我在學習，所以我嘗試瞭解遍歷的工作原理。我的第一個想法是點擊其中一個「二級」主播並突出顯示所有「四級」的孩子。但我不知道如何編碼，我想要達到下一個UL ul。 – 2010-10-21 09:05:26

使用attribute-starts-with selector所在班級名稱屬性與level開始分配處理程序的<a>元素，並確保該事件由calling e.stopPropagation()不會冒泡。

例子：http://jsbin.com/upuho3/3

$("a[class^=level]").click(function(e){ 
     $(this).next("ul").css("background", "yellow"); 
     e.stopPropagation(); 
    });

編輯：如果要清除之前的選擇，你可以放置和<div>容器上的ID，並使用該to .find()嵌套<ul>元素，並在選擇當前之前重置它們。

例子：http://jsbin.com/upuho3/4

$("a[class^=level]").click(function(e){ 
    $('#top').find("ul").css("background", ""); 
    $(this).next("ul").css("background", "yellow"); 
    e.stopPropagation(); 
});

HTML

<div id="top"> 
    <ul> 
    <li ><a class="level1">Level 1</a> 
    ...

我建議使用類與jQuery's .addClass() method，而不是使用the .css() method雖然。

編輯：e.stopPropagation()因爲click事件是<a>元素真的不應該是必要的，因此它不會觸發祖先<a>元素。

來源

2010-10-20 16:30:15 user113716

非常感謝帕特里克，非常優雅的解決方案。我被這個語法卡住了：「a [class^= level]」。 jquery網站上有關於^ =的網頁嗎？ – 2010-10-21 08:33:16

@Jim D - 是的，我在答案中缺少一些文檔鏈接。我會更新。你問的是[屬性開始與選擇器]（http://api.jquery.com/attribute-starts-with-selector/）。 – user113716 2010-10-21 13:45:08

非常有用的章節關於屬性。謝謝。我現在將嘗試僅突出顯示「下一個ul下一個ul」（級別2點擊突出顯示第4級兒童）。對我來說不容易。 – 2010-10-22 12:09:16

使用Jquery遍歷錨點，未排序列表和子列表元素

回答

相關問題