Traversing anchor, unsorted list, and sublist elements with Jquery
<p>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.</p>

<p>Any clue on how to do that ? Thanks.</p>

<p>Here is my code :</p>

<pre><code>    &lt;script type="text/javascript" language="JavaScript"&gt;
    $(document).ready(function (){

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

    });
</code></pre>

<p></p>

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

<p>Sorry, I'm French !</p>
