http://jsfiddle.net/mblase75/NfzbA/ -- using jQuery 1.9.1
var $opts = $('.plant-page').map(function (i, el) {
return $('<option>');
}).appendTo('#change-page select');
The error in the JavaScript console says: Uncaught TypeError: Cannot read property 'ownerDocument' of undefined
When I switch to jQuery 1.8.3, result is as expected -- the option elements are appended to the select: http://jsfiddle.net/mblase75/NfzbA/2/
Am I doing something wrong?
In jQuery 1.9.1, if I rewrite the .map() callback function to return a DOMelement instead of a jQuery object, it works as expected: http://jsfiddle.net/mblase75/NfzbA/3/
var $opts = $('.plant-page').map(function (i, el) {
return $('<option>').text(this.id)[0];
}).appendTo('#change-page select');
When I submitted this as a jQuery bug (http://bugs.jquery.com/ticket/13567), I was told:
Resolution set to notabug
You are trying to append a jQuery object that is inside a jQuery object, since you inserted a jQuery object into said jQuery object via the
$.fn.map(). This is not supported, but obvious enough. We generally don't make a list of everything that cannot be in a jQuery set because there is an infinite list of possibilities for doing it wrong. Your rewrite looks better.
So: even though this worked in jQuery 1.8, it's considered a reversion to expected behavior rather than a bug. .map() callbacks should always return DOMelements instead of jQuery objects.
this is a DOM Node, not a jQuery object, the returned value should be in that same form. $([$(),$(),$()]) also no longer works even though it used to in the past.
$($some-jQuery-object) still returns a valid jQuery object!