keeping count of new items

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title></title> </head> <body> <ul> <li id="item_123" name="123"> <fieldset class="additem"> <input type="text" name="title" value=""> </fieldset> <ul> <li id="item_253" name="253"> <fieldset class="remove additem"> <input type="text" name="title" value=""> </fieldset> </li> <li id="item_252" name="252"> <fieldset class="remove additem"> <input type="text" name="title" value=""> </fieldset> </li> <li id="item_250" name="250"> <fieldset class="remove additem"> <input type="text" name="title" value=""> </fieldset> </li> <li id="item_247" name="247"> <fieldset class="remove additem"> <input type="text" name="title" value=""> </fieldset> </li> </ul> </li> </ul> </body> </html>

$(document).ready(function(){ $('<p class="add">Add <img src="/add.png" alt="up.png" /></p>').click(function() { add_item(this); }).prependTo("fieldset.additem"); } function add_item(btn){ var li =' <li id="item_new'+ X+'" name="new"'+ X+'>'+ '<fieldset class="remove additem">'+ '<input type="text" name="title" value="">'+ '</fieldset>'+ '</li>'; if(!$(btn).parent().next('ul').length) { $(btn).parents("li:first").append("<ul>"+li+"</ul>"); }else { $(btn).parent().next("ul").prepend(li); } }

About the discussion of global variables. I see now that I read your code wrong and my answer was only directed at your comment, so it came out out of context.

This is what i meant by x not being global if it is defined inside document.ready:

<script type="text/javascript">

var global = "this is global";

$(document).ready( function() {
    var notGlobal = "this is confined to the callback function of document.ready()";
    alert(global + "\n" + notGlobal)
});

//Now we're back to the global scope. "notGlobal" is not reachable from here
//This will give an error, as "notGlobal" isn't defined in this scope
alert(global + "\n" + notGlobal);

</script>

The answer to your question

In your provided jQuery code, it's true that x would need to be global, since add_item is defined outside of document.ready. Here's one solution. Put the definition of X and add_item inside of document.ready. That way you don't need anything in the global scope (although since add_item takes an X parameter, it doesn't need to be in the same place as the declaration of X)

$(document).ready(function(){
    var X = 0;

    $('<p class="add">Add <img src="/add.png" alt="up.png" /></p>')
    .click(function() {
        add_item(this,X);
        X++
    })
    .prependTo("fieldset.additem");

    function add_item(btn,X){
        var li = ''+
        '<li id="item_new'+ X+'" name="new'+ X+'">'+
            '<fieldset class="remove additem">'+
                '<input type="text" name="title" value="">'+
            '</fieldset>'+
        '</li>';

        if(!$(btn).parent().next('ul').length) {
            $(btn).parents("li:first").append("<ul>"+li+"</ul>");
        }else {
            $(btn).parent().next("ul").prepend(li);
        }
    }
});

ansaurus

tags:

views:

answers:

keeping count of new items

related questions