Traversing anchor, unsorted list, and sublist elements with Jquery

Question

Hi,

I'm learning JQuery and I'm trying to understand how to parse an unsorted list. My script works and it can highlight in yellow sublist (click on "level 2C" and 2d anchor), but i'm unable to highlight only level 3 or only level 4.

Any clue on how to do that ? Thanks.

Here is my code :

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

Sorry, I'm French !

Answer 1

Assign the handler to the <a> elements using the attribute-starts-with selector where the class name attribute starts with level, and then make sure the event doesn't bubble by calling e.stopPropagation().

Example: http://jsbin.com/upuho3/3

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

---

EDIT: If you want to clear previous selections, you could place and ID on the <div> container, and use that to .find() the nested <ul> elements, and reset them before you select the current.

Example: 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>
     ...

I'd suggest using classes with jQuery's .addClass() method instead of using the .css() method though.

---

EDIT: e.stopPropagation() really shouldn't be necessary since the click event is on the <a> element and as such it won't trigger the ancestor <a> elements.