jQuery select a child from parent of parent of parent
<p>I have this custom menu I've just built:</p>

<pre><code>&lt;div class="select_input_wrap"&gt;
    &lt;div class="select_input_wrap_left"&gt;
        &lt;input class="select_input" type="text" id="search_topics" autocomplete="off" spellcheck="false"&gt;
    &lt;/div&gt;
    &lt;div class="select_input_wrap_right"&gt;&lt;/div&gt;
    &lt;div class="clear"&gt;&lt;/div&gt;
    &lt;div class="select_input_menu" id="search_topics_menu"&gt;
        &lt;ul class="custom_select_menu"&gt;
            &lt;li&gt;Option 1Option 1Option 1Option 1Option 1Option 1Option 1&lt;/li&gt;
            &lt;li&gt;Option 2&lt;/li&gt;
            &lt;li&gt;Option 3&lt;/li&gt;
            &lt;li&gt;Option 1&lt;/li&gt;
            &lt;li&gt;Option 2&lt;/li&gt;
            &lt;li&gt;Option 3&lt;/li&gt;
            &lt;li&gt;Option 1&lt;/li&gt;
            &lt;li&gt;Option 2&lt;/li&gt;
            &lt;li&gt;Option 3&lt;/li&gt;
            &lt;li&gt;Option 1&lt;/li&gt;
            &lt;li&gt;Option 2&lt;/li&gt;
            &lt;li&gt;Option 3&lt;/li&gt;
            &lt;li&gt;Option 1&lt;/li&gt;
            &lt;li&gt;Option 2&lt;/li&gt;
            &lt;li&gt;Option 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>When somebody clicks an <code>&lt;li&gt;</code>, I want to grab the text from inside it and place it inside the closest  field situated before the <code>&lt;li&gt;</code>. This is not the only menu on my page, hence using <code>$(this)</code>, otherwise it would be as easy as putting the <code>.text()</code> in to the input field of a certain class or id.</p>

<p>I have been trying stuff like this:</p>

<pre><code>$('.custom_select_menu li').click(function() {
    //$(this).closest('.select_input').val($(this).text());
    //$(this).closest('.select_input_wrap').children('input').val($(this).text());
});
</code></pre>

<p>But I just can't get there. Please can somebody explain how to achieve this?</p>
