jquery - 使用 Jquery 遍历 anchor 、未排序列表和子列表元素

Question

我正在学习 JQuery，并试图了解如何解析未排序的列表。 我的脚本有效，它可以在黄色子列表中突出显示(单击“level 2C”和 2d anchor )，但我无法仅突出显示 3 级或仅突出显示 4 级。

有关于如何做到这一点的任何线索吗？谢谢。

这是我的代码:

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

对不起，我是法国人!

Answer 1

将处理程序分配给 <a>使用 attribute-starts-with selector 的元素其中类名属性以 level 开头，然后确保事件不会冒泡 calling e.stopPropagation() .

示例: http://jsbin.com/upuho3/3

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

<小时/>

编辑:如果您想清除以前的选择，您可以将 ID 放在 <div> 上。容器，然后使用 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()确实没有必要，因为点击事件位于 <a>元素，因此它不会触发祖先 <a>元素。