How javascript "this" handles multiple selector returns from jquery?
<p>I was making a menu today, and I stumbled on this curious case, with the following HTML:</p>

<pre><code>&lt;div id="list1"&gt;
    &lt;ul&gt;
        &lt;li&gt;1&lt;/li&gt;
        &lt;li&gt;2 - Here is a Submenu
            &lt;ul&gt;
                &lt;li&gt;3&lt;/li&gt;
                &lt;li&gt;4&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<p>Then i used the following js:</p>

<pre><code>$('#list1 li').click(function(){
   $('.list-item').removeClass('list-item');
   $(this).addClass('list-item');
});
</code></pre>

<p>When I do this the class would only be applied to the outer <code>&lt;li&gt;</code>, but I wanted it to be applied to both the parent and child <code>LI</code>s. </p>

<p>Now my question is, how can I handle this "returns" so I apply the classes to both the parent and child <code>LI</code>s?</p>

<p>How does js handle these type of selectors? Is the event really running twice and removing the last class that was set?</p>
