How do you set a variable to be an empty, but workable Jquery object?

Question

Outside of a for I declare a variable using var list;. I use this variable inside of my for loop like so:

// add the html to the list
if (list == undefined)
    list = item;
else
    list.append(item.contents());

item is a cloned jquery object build from a $('list_template').clone(); call (list_template is a div with <li> elements inside). What I am doing is creating a list, which I will then appendTo() where I need it.

Right now this code works fine, but it doesn't seem right to me. Unfortunatly, I cannot seem to figure out how to correctly declare the list variable to be an empty Jquery object. I have tried both:

var list = $([]);
var list = $('');

Both of those cause the append to not work correctly (or as expected) with list.html() being null. Is there a way to initialize my variable to an empty jquery object, so all I have to do is list.append(item.contents()); without the if/else statements?

---

Edit: Ok to lessen confusion here is the whole javascript function that currently works fine:

        var list;

        // Loop through all of the objects
        var objects = data.objects;
        for (x = 0; x < objects.length; x++) {
            // Clone the object list item template
            var item = $("#object_item_list_template").clone();

            // Setup the click action and inner text for the link tag in the template
            item.find('a').bind('click', { val: objects[x].Id }, function (e) { ShowObjectDetails(e.data.val); })
                          .html(objects[x].Name);

            // add the html to the list
            if (list == undefined)
                list = item;
            else
                list.append(item.contents());
        }
        // set the list of the topics to the topic list
        $("#object_list").empty();
        $('<ul>').appendTo("#object_list").append(list.contents());

The object list template is as follows:

<div id="object_item_list_template" style="display:none">
    <li class="object_item"><a href="#"></a></li>
</div>

This all works correctly by cloning the list item, setting up the click action, and adding it to the list on the display.

I am trying to get rid of the if/else statement. I can't just do list.append() because if list is undefined (or not a Jquery object), it throws an exception.

Solution

An empty jQuery object is declared as:

$();

Docs for jQuery object creation: http://api.jquery.com/jQuery/

---

EDIT:

It sounds like you're trying to eliminate the if/else statement by extending list whether or not it has any content.

Is that right?

If so, try something like this:

list = $( list.get().concat(item.get()) );

or

$.extend(list, item);

(Assumes list is starting out as an empty jQuery object.)

---

EDIT:

Since you're creating elements in a loop, you can always push() then into a jQuery object.

Try something like this:

var list = $();  // Start off with empty jQuery object.

...

list.push(item.find('li').get(0));  // A jQuery object is an Array. You can `push()` new items (DOM elements) in.

...

('<ul>').appendTo("#object_list").append(list);

(I edited from the original to only push the DOM element into the jQuery object.)

Should add the current item in the loop to your list.

You could eliminate the find() calls in your code if you just cloned the children of #object_item_list_template:

$('li', '#object_item_list_template').clone();  // Clone the `li` without the `div`.

Now you have a clone of the li itself. No need to do a find.

Comments

[Nick Craver]

I think what he needs is list = $("<ul />"), .append() the items, then $("#destination").append(list.contents());, something along those lines...but I can't be 100% sure from the question, there's a few invalid things going on as I noted in comments.

[user113716]

@Nick Craver - Yeah, the li elements in the div isn't right (though they do show up in Firefox anyway), and the append() isn't right, but I think the gist of the question is that he wants to eliminate the if/else by extending list, whether it be from an empty jQuery object, or a populated one. You're right, a little odd and tough tell what is intended.

[KallDrexx]

Oh interesting, I didn't realize jquery objects are arrays. I'll give this a shot when I get home!

[KallDrexx]

Why do you do a .get(0) on the .find? If use get instead of pushing the results of .find() will it maintain all javascript/jquery bindings on the inside elements (that was the main reason for me not to copy the html inside, because the javascript bindings would be lost)?

[user113716]

@KallDrexx - Because DOM elements need to be pushed in. The .get() pulls the DOM element out of the .find() result. I believe that your click event (and its data) will be maintained.