jQuery addClass doesn't add class to element
<p>I've the following html code</p>

<pre><code>&lt;ul class='selectul'&gt;
    &lt;li class='active'&gt;&lt;a href='?sortby=views'&gt;by Popularity.&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href='?sortby=recency'&gt;by Recency.&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href='?sortby=alphabet'&gt;Alphabetically.&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>When any <code>&lt;li&gt;</code> element is clicked, I want to add <code>class='active'</code> to it. None of its siblings is then allowed to have this class. I tried to do this with the following jQuery code</p>

<pre><code>(function(){
    $('.selectul li').on('click',function(){
        $(this).addClass('active');
        $(this).siblings().removeClass('active');
    });
}())
</code></pre>

<p>but it doesn't seem to do anything. I'm just getting started with jQuery so I apologize if this question is rather basic.</p>
