Creating an li dynamically based on data-attribute using JQuery

Question

I want something that functions like this: You click on a name such as Mary Smith and it dynamically generates the data-name value in another ul and li element. I have that part working, however, I need it to not change all of the li elements to that value. Each time Mary Smith or Tom Jones is clicked it needs to create an li with that value and not change the value of the existing ones.

You can find the fiddle here: http://jsfiddle.net/rsxavior/zHkS8/3/ Basically I need it to function as if the .account-select class could be considered the 'this' value for the function. I am not sure of a way to go about doing that.

<ul>
    <li><a href="#" class="account" data-name="John Smith">John Smith</a></li>
    <li><a href="#" class="account" data-name="Mary Jones">Mary Jones</a></li>
</ul>

<ul class="account-hidden-li"></ul>

$('.account').click(function () {
    $('.account-hidden-li').append('<li class="account-select"><a class="close bcn-close" data-dismiss="alert" href="#">&times;</a></li>');
    $('.account-select').text($(this).data("name")).prependto();
});

http://jsfiddle.net/rsxavior/tS9H8/9/

Ram · Accepted Answer · 2012-09-21 12:45:48Z

1

You can use :last selector:

$('.account-select:last a').text($(this).data("name"));

http://jsfiddle.net/FwTYe/

Or:

$('.account').click(function () {   
    var txt =  $(this).data("name");
    $('<li/>', {
        'class': 'account-select',
        'html': '<a class="close bcn-close" data-dismiss="alert" href="#">'+txt+'</a>'
    }).appendTo('.account-hidden-li')
});

http://jsfiddle.net/42FYA/

edited Sep 21, 2012 at 12:45

answered Sep 21, 2012 at 12:22

Ram

145k16 gold badges174 silver badges201 bronze badges

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

Comments

Giscard Biamby · Accepted Answer · 2012-09-21 12:46:35Z

0

I'm a little confused, I think there might be another error in your code. Using .text(), you are wiping out the <a> element within each li.account-select.

I think this solves your question and also preserves your "close" links:

$('.account').click(function () {
    $('.account-hidden-li').append('<li class="account-select">'+$(this).data("name")+'<a class="close bcn-close" data-dismiss="alert" href="#">&times;</a></li>');
});

answered Sep 21, 2012 at 12:46

Giscard Biamby

4,6191 gold badge24 silver badges24 bronze badges

Collectives™ on Stack Overflow

Creating an li dynamically based on data-attribute using JQuery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related