Databases
StackOverflow2013
Postsdbo
POHow to find a certain closest nested <select> from inside another div
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to find a certain closest nested <select> from inside another div
    text
    copied!<p>I have the following structure in a form:</p> <pre><code>&lt;div class='full'&gt; &lt;div class='half'&gt; &lt;label&gt;Book&lt;/label&gt; &lt;select class='collection_ID'&gt; &lt;option&gt;&lt;/option&gt; &lt;option value="1"&gt;Geen leuk boek / &amp;euro; &lt;span&gt;14.50&lt;/span&gt;&lt;/option&gt; &lt;option value="2"&gt;Cool boek! / &amp;euro; &lt;span&gt;24.50&lt;/span&gt;&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; &lt;div class='half'&gt; &lt;label&gt;Find a book&lt;/label&gt; &lt;input type='text' class='invoke_search'&gt; &lt;/div&gt; &lt;/div&gt; &lt;button class='clone'&gt;Another Book&lt;/button&gt; </code></pre> <p>And here is my question. I have an input field</p> <pre><code>&lt;input type='text' class='invoke_search'&gt; </code></pre> <p>If a user decides to type some text and then moves on (i.e blur event) he/she wants to search a book by title in the pretty close to it.</p> <p>My jQuery function is the following:</p> <pre><code>$('.invoke_search').live('blur', function() { var needle = this.value; var haystack = $(this).parent().parent().find('select').children(); search(needle, haystack); }); </code></pre> <p>It's on a .live() event listener (or however you call that), because the clone button will create a copy/clone of the .. so a user can add more books to the form, this also means that I cannot use a unique ID on the , since the user has to search in a single for an option and not in every select.</p> <p>Now to get to my question, the following part is kind of hardcoded:</p> <pre><code>var haystack = $(this).parent().parent().find('select').children(); </code></pre> <p>So I am looking for a way to use something like:</p> <pre><code>$(this).closest('select'); </code></pre> <p>As if my form structure looked like:</p> <pre><code>&lt;div class='full'&gt; &lt;label&gt;Book&lt;/label&gt; &lt;select class='collection_ID'&gt; &lt;option&gt;&lt;/option&gt; &lt;option value="1"&gt;Geen leuk boek / &amp;euro; &lt;span&gt;14.50&lt;/span&gt;&lt;/option&gt; &lt;option value="2"&gt;Cool boek! / &amp;euro; &lt;span&gt;24.50&lt;/span&gt;&lt;/option&gt; &lt;/select&gt; &lt;label&gt;Find a book&lt;/label&gt; &lt;input type='text' class='invoke_search'&gt; &lt;/div&gt; </code></pre> <p>This would make styling pretty hard, so is there a way to use .closest() or .find() in some smart way instead of 'hardcoded' parent().parent().find()?</p> <p>Thanks in advance</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload