jQuery - 将字符从一个列表传输到另一个列表

我有2个包含字符的列表。我正在尝试使用li和html中的新字符名称根据数据属性值更新旧字符列表。点击更改名单的时候，所以最后的结果是这样的：jQuery - 将字符从一个列表传输到另一个列表

//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>

这里有一个小提琴：http://jsfiddle.net/wXnSZ/

来源

2012-04-26 Wonka

是否要将旧的字符列表替换为新的字符列表，或将新的字符追加到旧的字符列表中？ – j08691 2012-04-26 20:05:02

@ j08691我想根据匹配的数据值使用新列表中的列表覆盖旧列表的li id和html名称。 – Wonka 2012-04-26 20:16:48

好的，在我的回答中，我给了你两种可能性的解决方案。我将为覆盖代码添加一个jsFiddle。 – j08691 2012-04-26 20:17:41

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

FIDDLE

要更换ID藏汉，但保留跨度：

$('#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

或基于数据属性来改变每个李的完整的HTML中old_characters：

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

FIDDLE

，或者只是把new_characters的HTML到old_characters：

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

FIDDLE

来源

2012-04-26 20:14:42 adeneo

这里有两种可能性伊蒂埃斯：

1）追加新角色，以老字符名单：

$('#change').click(function() { 
    $('#old_characters').append($('#new_characters').contents()); 
    $('#new_characters').remove(); 
});

2）用新的字符替换旧的字符：

$('#change').click(function() { 
    $('#old_characters').contents().replaceWith($('#new_characters').contents()); 
});

jsFiddle example的解决方案＃2。

来源

2012-04-26 20:16:14 j08691

jQuery - 将字符从一个列表传输到另一个列表

回答

相关问题