Question

I have 2 list with characters. I’m trying to make the old characters list updated with the new characters names in the li and html based on the data attribute value. when the Change List is clicked, so the final outcome looks like this:

//BEFORE
<ul id="new_characters">
<li id="peter"><div data="character1" class="character">Peter Griffin</div></li>
<li id="joe"><div data="character2" class="character">Joe Swanson</div></li>
</ul>

<ul id="old_characters">
<li id="glenn"><span data="character1" class="character">Glenn Quagmire</span></li>
<li id="louis"><span data="character2" class="character">Loius Griffin</span></li>
</ul>

<span id="change">Change List</span>

//AFTER
<ul id="old_characters"> //only this list should change on #change click
<li id="peter"><span data="character1" class="character">Peter Griffin</span></li>
<li id="joe"><span data="character2" class="character">Joe Swanson</span></li>
</ul>

Here’s a fiddle: http://jsfiddle.net/wXnSZ/

Answer 1

$('#change').click(function(){
    $('.character', '#new_characters').each(function(index, item){
        $(".character[data='"+$(item).attr('data')+"']", "#old_characters").text($(item).text());
    });    
});​

FIDDLE

To replace the ID aswell, but keep the spans:

$('#change').click(function(){
    $('.character', '#new_characters').each(function(index, item){
        $(".character[data='"+$(item).attr('data')+"']", "#old_characters").text($(item).text()).parent().attr('id', $(item).parent().attr('id'));
    });    
});​

FIDDLE

or to change the complete html of each li in old_characters based on the data attribute:

$('#change').click(function(){
    $('.character', '#new_characters').each(function(index, item){
        $(".character[data='"+$(item).attr('data')+"']", "#old_characters").replaceWith($(item).clone());
    });    
});​

FIDDLE

or to just put the HTML of new_characters into old_characters:

$('#change').click(function(){
   $("#old_characters").html($('#new_characters').html());
});​

FIDDLE