Free Trial

Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.

Share this Page URL

Adding Additional Flower Products > Adding Additional Flower Products - Pg. 310

CHAPTER 11 REFACTORING THE EXAMPLE: PART I I then define a skeletal set of elements; these describe the structure of elements that I want for each product but don't contain any of the attributes that distinguish one flower from another: var fTemplate = $('<div class=dcell><img/><label/><input/></div>'); I use the skeletal elements as a simple template, cloning them for each of the flowers I want to add and using the name of the flower to add the attributes and values: for (var i = 0; i < fNames.length; i++) { fTemplate.clone().appendTo(fRow).children() .filter('img').attr('src', fNames[i] + ".png").end() .filter('label').attr('for', fNames[i]).text(fNames[i]).end() .filter('input').attr({name: fNames[i], value: 0, required: "required"}) } I use the filter and end methods to narrow and broaden the selection and the attr method to set the attribute values. I end up with a fully populated set of elements for each new flower, inserted into the row-level div element, which in turn is inserted into the table-level element. You can see the effect in Figure 11-2.