Question

我正在学习JQuery，我正在尝试理解如何解析未排序的列表。我的脚本有效，它可以在黄色子列表中突出显示（单击“级别2C”和2d锚点），但我无法仅突出显示级别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

使用attribute-starts-with selector将<a>元素分配给level元素，其中{name>属性以$("a[class^=level]").click(function( e ){ $(this).next("ul").css("background", "yellow"); e.stopPropagation(); });开头，然后确保事件不会被calling e.stopPropagation()冒泡

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

<div>

编辑：如果您要清除之前的选择，可以在<ul>容器上放置ID，并使用to .find()嵌套的$("a[class^=level]").click(function( e ){ $('#top').find("ul").css("background", ""); $(this).next("ul").css("background", "yellow"); e.stopPropagation(); });元素，并在选择当前之前重置它们。

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

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

HTML

e.stopPropagation()

我建议使用jQuery's .addClass() method的课程，而不是使用the .css() method。

编辑： <a>确实不应该是必需的，因为点击事件位于<a>元素上，因此它不会触发祖先{{1} } elements。

使用Jquery遍历锚点，未排序列表和子列表元素

1 个答案: