Question

The user has an option create up to 100 list items. My goal is to create a menu under each item that will edit that individual item. Here is the code up to the edit button:

$(document).ready(function(){

var nextItemId = 1;

$('#AddItem').click(function(){

        //Create and add a paragraph

$('<p />').attr('id', 'itemParagraph' + nextItemId)

.text(nextItemId + ". ")

.appendTo('#listInput');


    //Create and add an input box

$('<input />').attr({'type':'text', 'id':'item' + nextItemId})

.appendTo('#itemParagraph' + nextItemId);

        //Create an edit button for input box

$('<input />').attr({'type':'button', 'value':'Edit', 'id':'editItem' + nextItemId})

.appendTo('#itemParagraph' + nextItemId);

    //d number

nextItemId++;

});

How can I create functions that will apply to all variables item1, item2, etc… item100 with its corresponding edit button editItem1, editItem2, etc…. editItem100? Is there a way to refer to these variables and condense it all nicely into a function when creating the menu for them? The menu will slide down when the edit button is pressed.

Answer 1

Keep a reference to what you get back from $('<input />') and pass that to the callback. Example:

var item = $('<input />');
item.attr({'type':'text', 'id':'item' + nextItemId})
    .appendTo('#itemParagraph' + nextItemId);

... create menu ...
menuItem.click(function() { item.focus(); })

That works because the anonymous function keeps a pointer to the context in which it was created and thus, to the “value” of item at the time (= the reference to which it pointed).