jQuery's find() is 'order' specific'? Why does find return zero if order changes?

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

Here are is the piece of code:

$(this).parents('li:eq(0)').find('.dataPostArea').replaceWith(text); //1
$(this).parents('li:eq(0)').find('.hoverMenu').show(); //2

Here's the html:

<li class="post issuePost" data-winbook-contentType="Issue" data-winbook-issueId="null">
    <div style="display:none;" class="hoverMenu">
        <a href="#delete">
        <img class="hoverButton deleteButton" src="deleteredicon.png"/>
        </a>
        <a href="#edit">
        <img class="hoverButton editButton" src="editpencil.png"/>
        </a>
    </div>
    <div class="postContainer">

        <div class="avatarColumn">

            <a href="#">
            <img src="defaultavatar.jpg"/>
            </a>
            <div class="authorName">
                <a href="#">Nupul</a>
            </div>
        </div>
        <div class="postDetailsContainer">
            <div class="dataPostArea">
                <textarea class="dataForm" style="float:left; min-height:50px; min-width:330px; resize:none; margin:2px; margin-bottom:5px; overflow-x:hidden;" name="data">
                </textarea>
                <button class="addDataButton"    style="width:95px; margin:3px 2px; padding:1px 4px 1px 4px;">
                    Add Issue
开发者_JAVA技巧                </button>
                <button class="cancelDataButton" style="width:95px; margin:3px 2px; padding:1px 4px 1px 4px;">
                    Cancel
                </button>
                <div class="clear"/>
                    <span>10 characters left</span>
                </div>
            </div>
        </div>
        <div class="clear">
        </div>
</li>

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?

(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 :)

I may be performing an incorrect 'query' and corrections are more than welcome. I've not cached the $(this).parents('li:eq(0)') and don't think it should matter for this problem. (Should it?)

your $(this) object is a <button class="addDataButton">, correct? which you replace with txt once you post. corrrect?

what happened is that this line

$(this).parents('li:eq(0)').find('.dataPostArea').replaceWith(text); //1

will remove the button object $(this) , making then second line void . Thats why it showed you that it dosen't exist (didn't find any) and thats why when you switch over it works

if you want to keep the order do something this

listelement  = $(this).parents('li:eq(0)');
listelement.find('.dataPostArea').replaceWith(text);
listelement.find('.hoverMenu').show();