Problem with chained detach() call

[[email protected]…]

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

[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.

[anonymous]

Replying to 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. :)

[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.

[anonymous]

Replying to 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().