Question

132

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

rated 0 times [ 135] [ 3] / answers: 1 / hits: 23223 / 14 Years ago, wed, may 26, 2010, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

editha

Add To Favorites

Follow

Total Points: 564

Total Questions: 107

Total Answers: 109

Location: Finland

Member since Fri, Oct 21, 2022

2 Years ago

answered 14 Years ago taylert · Accepted Answer

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.