Bug Tracker

#13098 closed bug (notabug)

Opened December 20, 2012 02:07PM UTC

Closed December 21, 2012 04:07AM UTC

Problem with chained detach() call

Reported by: bryantg@networldalliance.com Owned by:
Priority: undecided Milestone: None
Component: unfiled Version: git
Keywords: Cc:
Blocked by: Blocking:
Description

My code is something like this:

$('#container')
  .find('#item1, #item2')
    .detach()
    .appendTo('#destination')
    .end()
  .find('form') . . .

When I execute this, no form element is found, though there is one in "container". If I comment out the calls to detach() and appendTo(). It does find the form. So there's something weird going on with those two methods, it would seem, when they are executed inline.

When the above didn't work, I tried placing these two methods in a call to each() like so:

$('#container')
  .find('#item1, #item2')
    .each(function() {
      $(this).detach().appendTo('#destination')
    })
    .end()
  .find('form') . . .

This produced the expected results. So the question is, why did the combination of detach() and appendTo() not work inline but did work within the context of each()?

Attachments (0)
Change History (5)

Changed December 20, 2012 02:12PM UTC by dmethvin comment:1

Based on the markup it looks like you expect the .end() to get you back to #container? In 1.8.3 or lower if there is only one element it does not push. Otherwise it does, so if you have two elements (it seems you do) then you are only back to the #item1, #item2 set.

As of 1.9, .appendTo() will always push a new set but that wouldn't change your case here.

Changed December 20, 2012 02:42PM UTC by anonymous comment:2

Replying to [comment:1 dmethvin]:

Based on the markup it looks like you expect the .end() to get you back to #container? In 1.8.3 or lower if there is only one element it does not push. Otherwise it does, so if you have two elements (it seems you do) then you are only back to the #item1, #item2 set. As of 1.9, .appendTo() will always push a new set but that wouldn't change your case here.

Ah, good call. I added another end(), and that worked. So it would seem that detach() takes us up another level. I was not expecting that based on the documentation. Might want to amend that for the sake chain happy coders like me. Thanks. :)

Changed December 20, 2012 02:54PM UTC by dmethvin comment:3

No, the .find() and .appendTo() are the ones stacking. The indentation would go like this, if you nested them at the same level where the stacking occurred:

$('#container')
  .find('#item1, #item2')
    .detach()
    .appendTo('#destination')
    .end() // ends the .appendTo()
  .end()   // ends the .find()
  .find('form')
    ...etc

TBH I've never seen anyone use an .end() after an .appendTo(), and you'll want to be careful since up to 1.8.3 it doesn't stack in all cases. The docs for .appendTo() do describe the current behavior though.

Changed December 20, 2012 02:56PM UTC by anonymous comment:4

Replying to [comment:3 dmethvin]:

No, the .find() and .appendTo() are the ones stacking. The indentation would go like this, if you nested them at the same level where the stacking occurred: 
> $('#container')
>   .find('#item1, #item2')
>     .detach()
>     .appendTo('#destination')
>     .end() // ends the .appendTo()
>   .end()   // ends the .find()
>   .find('form')
>     ...etc
>
TBH I've never seen anyone use an .end() after an .appendTo(), and you'll want to be careful since up to 1.8.3 it doesn't stack in all cases. The docs for .appendTo() do describe the current behavior though.

Oh, gotcha. Many thanks for the quick reply. Will have to take another look at appendTo().

Changed December 21, 2012 04:07AM UTC by dmethvin comment:5

resolution: → notabug
status: new → closed