Jquery multiple each function inside click event
<p>When clicking the  I want this particular .parents ul to open and all other to collapse. Below code does not work for me.</p>

<p>I think I do not understand how I use <strong>this</strong> and misuse <strong>e</strong> in the below code.</p>

<pre><code>&lt;html&gt;
&lt;head&gt;
&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="/der/jquery.cookie.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
$(document).ready(function(){
    var selected;
    $(".parents").click(function(){
        selected = this.id;

        // Open list
        $("#" + selected + " ul").css("display", "block");

        // Remember opened list
        $.cookie('tree', '#' + this.id);

        // Cycle through all lists
        $(".parents").each(function(e){
            // Collapse all children that does not
            // belongs to the opened list
            if(e.id != selected) {
                $("#" + e.id + " ul").css("display", "none");
            }
        });
    });
});
&lt;/script&gt;
&lt;style type="text/css"&gt;
.child_list {
    display: none;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;ul id="tree"&gt;
    &lt;li class="parents" id="parent_1"&gt;&lt;a href="#"&gt;Parent 1&lt;/a&gt;
        &lt;ul class="child_list"&gt;
            &lt;li class="child"&gt;&lt;a href="#"&gt;Child 1&lt;/a&gt;
            &lt;li class="child"&gt;&lt;a href="#"&gt;Child 2&lt;/a&gt;
            &lt;li class="child"&gt;&lt;a href="#"&gt;Child 3&lt;/a&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li class="parents" id="parent_2"&gt;&lt;a href="#"&gt;Parent 2&lt;/a&gt;
        &lt;ul class="child_list"&gt;
            &lt;li class="child"&gt;&lt;a href="#"&gt;Child 1&lt;/a&gt;
            &lt;li class="child"&gt;&lt;a href="#"&gt;Child 2&lt;/a&gt;
            &lt;li class="child"&gt;&lt;a href="#"&gt;Child 3&lt;/a&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
&lt;/ul&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
