0

I have list like this,

<input type="button" value="add" id="add"/>


<ul id="sortable"> 
<li class="ui-state-default" id="list_1"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li> 
<li class="ui-state-default" id="list_2"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li> 
<li class="ui-state-default" id="list_3"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li> 
<li class="ui-state-default" id="list_4"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li> 
<li class="ui-state-default" id="list_5"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li> 
<li class="ui-state-default" id="list_6"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li> 
<li class="ui-state-default" id="list_7"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>

Now I have an add button just above the list called add. When I am clicking add button it is appending the <li> something</li> to the list. But I want a unique id for it. Like the last <li>id is list_7, so I want the new id to be list_8. I am using this javascript code at the moment.

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

            $('#sortable').append('<li>something</li>');
        })

Kindly help me with this. thanks

Improve this question

3 Answers 3

Reset to default
2

If you just want to add it based upon the number of li in the ul you can just query the length to build your id.

$('#add').click(function() {
    var $li = $('<li>something</li>');
    var theId = 'list_' + ($("#sortable li").length + 1);
    $li.attr("id", theId);
    $('#sortable').append($li);
});

Code example on jsfiddle.

Updated If you want to delete somewhere in the ul you can easily keep track of the starting index and just increment from there. For simplicity sake I just made the click li remove the item.

var index = $("#sortable li").length;
$('#add').click(function() {
    index = index + 1;
    var $li = $('<li>something</li>');
    var theId = 'list_' + (index);
    $li.attr("id", theId);
    $('#sortable').append($li);
});
$("#sortable").delegate("li", "click", function(){
    $(this).remove();
});

Note: since items are added dynamically you need to use either live() or delegate()

Updated fiddle with delete.

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

I tried your code..but when i tried to print it in html to see the id..its like list_undefined. I want a number like list_8 kind of.
See my jsfiddle, my first go around had a typo.
thank you Mark...that works like charm. Any suggestions for removing the li too!?
@mad_programmer, it will depend. If the delete removes just the last li it will work. However if you allow delete from the middle there will be a problem with Id's and the use of length to generate an id will no longer work.
Well, I am afraid I want the last option. I want to let users delete the list from the middle of the list or from anywhere they like to. But can that be done by using some anchor tag or a button just next to any li?!!
|
2

You can use jQuery to get the number of LIs, and use that as the basis of your next index. For instance:

var list = $('#sortable'); //Cache since you reference it multiple times

 function addLi() {
  var index = list.find('li').length + 1;

  list.append('<li id="list_'+index+'"></li>');

}

$('#add').click(addLi);

UPDATED - Taking into account a "delete" behavior

Ok, if you wanted to delete, I might do something along the following lines. Note that the LI index is now less tied to the number of actual LIs on the page at any given point, so you can delete safely.

//Variables that will be set on document ready
var liIndex = 0;
var list = '';

function addLi() {
    list.append('<li id="list_'+(liIndex + 1)+'"><button class="remove">Remove</button><br /> Item</li>');
    liIndex += 1;
}

$(function(){
    //Cache for later reference
    list = $('#sortable');
    liIndex = list.find('li').length;

    //Add an LI whenver you click the add button
    $('#add').click(addLi);

    //Remove LI when click on button
    $('button.remove').live('click',function(){
        //Fade out before removing for smoother transition
        $(this).closest('li').fadeOut(250,function(){
            $(this).remove();
        });
    });
});
Improve this answer

3 Comments

And actually you could optimize that further by caching $('#sortable') outside of your function, instead of declaring it each time the function is called. - I updated my answer to show this.
thanks Philip. Any suggestions for deleting the li from the list?!
As @Richard Neil noted in his answer and comment, you get a lot of ways available to you. I would probably have a separate variable to store the indexes, increasing it by 1 each time I make an addition, so you're not relying on the actual number of LIs anymore. Have to get back to work now, but if no one's answered by the time I get back to this, I'll try to post an example.
0

If you don't have a delete function, then this is as simple as just counting the number of items inside your container.

$('#add').click(function(){
    var container = $('#sortable');
    var item = $('<li>something</li>')
        .attr('id','list_' + container.find('li').length + 1);
    container.append(item);
});
Improve this answer

2 Comments

@Philip ~ thanks. having a delete function on board makes the solution go so many different ways depending on how the numbering should be implemented, I guess. definitely ramps up the complexity a bit.
At that point it might make sense to have a variable that tracks the last-added index, and reference that on append, followed by incrementing your index tracker... yeah, a lot of different ways to go on that.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.