jQuery Tip #5: Using jQuery’s end() Function to Work with Sets (Dan Wahlin’s WebLog)

Posted on February 28, 2012

Posted by dwahlin at Dan Wahlin’s WebLog

Previous Tips:

jQuery’s selector functionality makes it easy to add new nodes into the DOM without making a lot of calls to document.createElement(). For example, the following code adds

and nodes into the DOM and appends them to a divContainer node:

$('
').appendTo('#divContainer');

The first part of the code (before appendTo()) creates an initial set and adds it to the stack. Once the set is on the stack you can go into it and use find() to grab specific nodes and then modify them as show next:

$('
')
    .find('span')
    .html(custName) //Update with some dynamic variable
    .appendTo('#divContainer');

Once find() is invoked you’re on the node so it will be appended to divContainer instead of the

that wraps when the call is appendTo() is made.

In cases where you need to dynamically generate DOM nodes, modify specific children as with the shown above, and then append the newly created set into a container, what do you do? Fortunately, jQuery provides an end() function that allows you to pop the current set off the stack and then move down to the next one. In the example above, calling end() immediately before appendTo() would cause the initial

that wraps to be appended to divContainer which would achieve the desired end result in this case. The following code shows an example of using find() and end().

$(document).ready(function () {
    var custs = getCustomerData();

    for (var i = 0; i < custs.length; i++) {
        var cust = custs[i];
        $('
')
            .find('span') //get to span
                .attr('title', cust.City)
                .data(cust)
                .html(cust.Name)
                .click(showCust)
            .end() //get back to span's parent div
            .appendTo('#divContainer');
    }
});

The code starts by creating the

and nodes which adds a new set onto the stack. It then moves to the using find() and modifies an attribute, the inner HTML, the data associated with the node, and attaches a click handler. Finally, it calls end() to move back to the wrapper

and then appends it to divContainer. What’s convenient about this type of code is that you can create a set of nodes, hook up some data to children in the set (via the data() function) and then append the parent of the initial set all in one step.

Live Example

If you’re interested in learning more about jQuery or JavaScript check out my jQuery Fundamentals or Structuring JavaScript Code courses from Pluralsight. We also offer onsite/online training options for companies as well at www.thewahlingroup.com.

Conclusion

While there are certainly other ways to accomplish this type of functionality, end() can be handy to know about when you need to chain several functions together and move around in the stack.

M	T	W	T	F	S	S
« Apr
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31