Get the top most related a element in jQuery
<pre><code>&lt;ul&gt;
    &lt;li&gt;
        &lt;a id="1"&gt;Item 1&lt;/a&gt;
        &lt;ul&gt;
            &lt;li&gt;
                &lt;a id="2"&gt;Item 1.1&lt;a&gt;
                &lt;ul&gt;
                    &lt;li&gt;
                        &lt;a id="3"&gt;Item 1.1.1&lt;/a&gt;
                        &lt;ul&gt;
                            &lt;li&gt;
                                &lt;a id="4"&gt;Item 1.1.1.1&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;   
</code></pre>

<p>I'm trying to get the <code>id</code> of top most <code>ul &gt; li &gt; a</code> tag (that is <code>#1</code>) from the <code>a</code> with <code>id="4"</code>. I'm trying like the below to get it:</p>

<pre><code> var getId = $(this).parents('ul:last &gt; a:first').attr("id"); 
</code></pre>

<p>I'm getting <code>undefined</code>. </p>

<p>Here depth may vary. I don't want to use <code>parent().parent().parent()</code> multiple times, because this tree may have much deeper child's, say up to <code>1.1.1.1.1.1</code> (5 levels) for that if I want to get the <code>id</code> of top most parent I need to use 5 times <code>parent()</code>, I don't want that. Is any other solution is available?</p>