jquery closest li doesn't work
<p><p>i have html page with a link<p>
<p> when user clicked that link a new select tag should be appeared <p></p>

<h1>html code</h1>

<pre><code>&lt;div class="container" id="addCell"&gt;
    &lt;ul class="containerUL"&gt;
        &lt;li class="containerLI"&gt;
            &lt;p&gt;
                &lt;label&gt;Name&lt;/label&gt;
                &lt;input type="text" class="longInput1"/&gt;
            &lt;p&gt;
            &lt;p&gt;
                &lt;label&gt;City&lt;/label&gt;
                &lt;select id="countrySelector"&gt;
                &lt;/select&gt;
            &lt;/p&gt;
        &lt;/li&gt;
        &lt;li class="containerLI"&gt;
            &lt;p&gt;
                &lt;label&gt;Inserted cells&lt;/label&gt;
                &lt;a href="#" class="smallLink" id="acaclink"&gt;new&lt;/a&gt;
            &lt;/p&gt;
        &lt;/li&gt;
        &lt;li class="containerLI"&gt;
            &lt;input type="submit" class="button1" value="save"/&gt;
        &lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<h1>jquery code</h1>

<pre><code>$("#addCell").ready(function(){
    $("#addCell").on('click',"#acaclink",function(){
        $.getJSON("http://localhost/Mar7ba/Cell/getAllCells/TRUE",function(data){
            var options = '';
            options+="&lt;option&gt;select cell&lt;/option&gt;";
            for(var i=0;i&lt;data.length;i++){
                options += "&lt;option&gt;"+data[i]+"&lt;/option&gt;";
            }
            $(this).closest('li').append('&lt;p&gt;\n\
            &lt;label&gt;Select Cell&lt;/label&gt;\n\
            &lt;select name="acSelect[]"&gt;\n\
             '+options+'\n\
&lt;/select&gt;\n\
            &lt;/p&gt;');
        });
    });
});
</code></pre>

<p>1- i am check the JSON call and there is no error 
2- i am alert option and it works as i want</p>

<p>my question is : when i replace <code>$(this).closes('li')</code> with <code>$('ul').append</code>
it works , but when i put closest li it doesn't . where is the mistake please </p>
