Databases
StackOverflow2013
Postsdbo
POjQuery's find() is 'order' specific'? Why does find return zero if order changes?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery's find() is 'order' specific'? Why does find return zero if order changes?
    text
    copied!<p>I'm not a jQuery pro by any means and it took me quite a while to figure out how to get 'it' to work right</p> <p>Here are is the piece of code:</p> <pre><code>$(this).parents('li:eq(0)').find('.dataPostArea').replaceWith(text); //1 $(this).parents('li:eq(0)').find('.hoverMenu').show(); //2 </code></pre> <p>Here's the html:</p> <pre><code>&lt;li class="post issuePost" data-winbook-contentType="Issue" data-winbook-issueId="null"&gt; &lt;div style="display:none;" class="hoverMenu"&gt; &lt;a href="#delete"&gt; &lt;img class="hoverButton deleteButton" src="deleteredicon.png"/&gt; &lt;/a&gt; &lt;a href="#edit"&gt; &lt;img class="hoverButton editButton" src="editpencil.png"/&gt; &lt;/a&gt; &lt;/div&gt; &lt;div class="postContainer"&gt; &lt;div class="avatarColumn"&gt; &lt;a href="#"&gt; &lt;img src="defaultavatar.jpg"/&gt; &lt;/a&gt; &lt;div class="authorName"&gt; &lt;a href="#"&gt;Nupul&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="postDetailsContainer"&gt; &lt;div class="dataPostArea"&gt; &lt;textarea class="dataForm" style="float:left; min-height:50px; min-width:330px; resize:none; margin:2px; margin-bottom:5px; overflow-x:hidden;" name="data"&gt; &lt;/textarea&gt; &lt;button class="addDataButton" style="width:95px; margin:3px 2px; padding:1px 4px 1px 4px;"&gt; Add Issue &lt;/button&gt; &lt;button class="cancelDataButton" style="width:95px; margin:3px 2px; padding:1px 4px 1px 4px;"&gt; Cancel &lt;/button&gt; &lt;div class="clear"/&gt; &lt;span&gt;10 characters left&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="clear"&gt; &lt;/div&gt; &lt;/li&gt; </code></pre> <p>Now if the order of 1 and 2 is as shown '.hoverMenu' is never shown. In fact the size of that jQuery object is zero! If 2 is before 1 it works fine. I'm not sure why. Any ideas?</p> <p>(In case you want to know what I'm trying to accomplish: Just taking the content in an editable textarea and replacing the textarea with that content for that list item. Similar to the "add comment" functionality of stackoverflow :)</p> <p>I may be performing an incorrect 'query' and corrections are more than welcome. I've not cached the <code>$(this).parents('li:eq(0)')</code> and don't think it should matter for this problem. (Should it?)</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