javascript - Using jQuery end() function with Destructive methods - Stack Overflow

I'm having some problems grokking the .end() function in jQuery. The docs I've read advertise it as "rolling back" changes from a filter or additional selection. For example,

var someDivs = $('div');
someDivs
  .filter('li')
  .css('color', 'green')
.end(); // ok, reverted back to original wrapper

On the other hand, this doesn't work.

someDivs
  .get(0) // get DOM element at index 0
.end(); // error, executing a jQuery method on a plain javascript object.

I'm just trying to verify that I'm correct that after certain chain-destructive methods like html(), text(), and get() are called, it's impossible to revert back to the original wrapper.

Thanks in advance.

I'm having some problems grokking the .end() function in jQuery. The docs I've read advertise it as "rolling back" changes from a filter or additional selection. For example,

var someDivs = $('div');
someDivs
  .filter('li')
  .css('color', 'green')
.end(); // ok, reverted back to original wrapper

On the other hand, this doesn't work.

someDivs
  .get(0) // get DOM element at index 0
.end(); // error, executing a jQuery method on a plain javascript object.

I'm just trying to verify that I'm correct that after certain chain-destructive methods like html(), text(), and get() are called, it's impossible to revert back to the original wrapper.

Thanks in advance.

• javascript
• jquery
• javascript-framework

Share Improve this question Follow asked Apr 11, 2011 at 1:47 maximusmaximus 2,44755 gold badges4040 silver badges5656 bronze badges 5

• It's not impossible. $(someDivs.get(0)).end();. Gonna update my answer and add this in. – Khez Commented Apr 11, 2011 at 1:59
• @Khez, that won't work sadly. It is equivalent to selecting elements from scratch again, in which case... where does end() go to? – David Tang Commented Apr 11, 2011 at 2:06
• @Box9 ... uhh you're wrong. A DOM element to wrap in a jQuery object. – Khez Commented Apr 11, 2011 at 2:09
• @Khez I'm not sure you understood me as I don't see how the link is relevant. My question is, what will end() return if the only information passed into $() is a single DOM element? – David Tang Commented Apr 11, 2011 at 2:14
• @Box9 ohh, that's what you meant, thought you meant I can't pass a DOM element to $(). I was proving that the function call doesn't fail, not that it leads anywhere. – Khez Commented Apr 11, 2011 at 2:17

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

Yes, end() will only work on methods that return a jQuery object. Methods that return strings (.html(), .text()) or DOM elements (.get()) won't allow you to chain any jQuery methods at all subsequently.

get() returns an actual HTML DOM Element not a jQuery element. You need to use eq():

someDivs.eq(0).end();

If you ever need to return to a jQuery object context from a dom element. You can always throw the element into $(). For example the above statement can be rewritten:

$(someDivs.get(0)).end();

^ This is exactly why you do $(this) in most event handlers. You're getting passed the DOM element not a jQuery object.

Yes, you are correct, as those "destructive" functions return values that are not jQuery objects.

However, you don't even need to use .end() when you store your selection in a variable (e.g. someDivs). None of jQuery's traversal functions (children(), filter(), etc...) actually modify the jQuery object they are applied on, but return a new one instead. This section of the jQuery docs is very helpful in understanding what occurs during chaining:

Most of jQuery's DOM traversal methods operate on a jQuery object instance and produce a new one, matching a different set of DOM elements. When this happens, it is as if the new set of elements is pushed onto a stack that is maintained inside the object. Each successive filtering method pushes a new element set onto the stack. If we need an older element set, we can use end() to pop the sets back off of the stack.

Since the original jQuery object is not modified, instead of using .end(), you can simply reference the original:

var html = someDivs.filter('li').html();
var text = someDivs.filter('p').text();