4

This throws a DOM-related error ("Uncaught Error: NOT_FOUND_ERR: DOM Exception 8" in Chrome):

var li$ = $("<li />");
var li2$ = $("<li />");
var lis$ = $([li$, li2$]);
$("<ul />").append(lis$);    // doing [li$, li2$] instead of lis$ breaks too

This code works fine:

var li$ = $("<li />");
var li2$ = $("<li />");
$("<ul />").append(li$).append(li2$);

Is this not a supported scenario? If so, any ideas why not? Should I report a bug in jQuery?

(1.5.2 by the way, but every version on JSFiddle gives the same error so at least it's not a regression.)

4
  • Obviously this is a minimal working example, but this is an actual pain point when e.g. doing a var lis$ = $("selector").map(function () { /* ... */ }) that returns disconnected DOM nodes. You cannot then just append lis$, but instead you have to loop through lis$ and add each one by one.
    – Domenic
    Apr 28, 2011 at 19:33
  • Looks like it is not supported by this ticket(bugs.jquery.com/ticket/8897), and will not be addressed in future versions. Apr 28, 2011 at 19:34
  • @Mark: nice find. But that explains why [li$, li2$] doesn't work; it seems that lis$ should.
    – Domenic
    Apr 28, 2011 at 19:39
  • By the way, you could've used add(): api.jquery.com/add But if you wanted to add a lost of elements that way, it would've been a lot of calls to add. They should at least do some kind of addArray() or addSeveral.
    – xavierm02
    Apr 28, 2011 at 20:39

3 Answers 3

4

$(element) returns an object made by jQuery that has a reference to the element. $(array)is the same but with several references. And here, you're kinda doing: $($(element)) except that as you pass an array in, it apparently doesn't check if they're already jQuery objects.

Looks like they didn't think of this usecase. They don't handle arrays: https://github.com/jquery/jquery/blob/master/src/core.js

Wait... they do:

var b = document.body;
$( [ b.firstChild, b.lastChild ] ).text( );//OK


var b = document.body;
$( [ $( b.firstChild ), $( b.lastChild ) ] ).text( );//FAIL

The problem seems to be in makeArray line 645 because the init method doesn't seem to take care of array and makeArray is called if nothing matched. And makeArray calls merge that merges the jQuery object (which has properties that an array must have) into the results of selector or [] and return it.

Problem solved: https://gist.github.com/947169 If you want to see how, look between <changes> and </changes>

I'll post an issue or do a pull request. Until they change it, you can just include: https://gist.github.com/raw/947169/6a9711ead197e17a636d7c43b72dc8efd7a6baec/jQuery.js

Ticket: http://bugs.jquery.com/ticket/9011 Pull request: https://github.com/jquery/jquery/pull/359

7
  • OK, but they do handle jQuery objects, and lis$ is a jQuery object even if [li$, li2$] is not.
    – Domenic
    Apr 28, 2011 at 19:40
  • Oh I see what you're saying. The $() function itself fails to handle arrays of jQuery objects, even though it does handle arrays of DOM elements. I was always under the (apparently mistaken) impression that it did, thus my question.
    – Domenic
    Apr 28, 2011 at 19:41
  • I jsut edited. They do handle arrays of elements and jQuery object but not arrays of jQuery objects /o/
    – xavierm02
    Apr 28, 2011 at 19:43
  • As I'm only editing the message and I'm not sure it gives you notifications, I'll post here to notify you.
    – xavierm02
    Apr 28, 2011 at 20:31
  • Thanks xavierm02! Really appreciate your willingness to go out of the way to help :)
    – Domenic
    Apr 28, 2011 at 20:38
1

Following from other answers that indicated that jQuery (up to 1.6 at least) doesn't support arrays of jQuery objects, my solution was to extract the dom object and insert that into an array instead.

var li1 = $("<li />").get(0);
var li2 = $("<li />").get(0);
var lis = [li1, li2];
$("<ul />").append(lis); 
-1
var li$ = $("<li />");
var lis$ = $([li$]);

What are you trying to accomplish with this? The first one will pull all <li/> tags on the page. So naturally, your second example would work.

What your first example does is it pulls all <li/> tags, wraps them with a jQuery object and then puts that jQuery object inside an array which is a parameter for another jQuery object.

I don't think the jQuery developers ever thought of that use case.

1
  • This was a minimal working example. Obviously in a real use case I'd have more than one element in my array. Question updated to reflect this.
    – Domenic
    Apr 28, 2011 at 19:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.