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

【问题标题】：jQuery - Transfer characters from one list to anotherjQuery - 将字符从一个列表传输到另一个列表
【发布时间】：2012-05-07 14:37:22
【问题描述】：

我有 2 个字符列表。我正在尝试根据数据属性值使用 li 和 html 中的新字符名称更新旧字符列表。单击更改列表时，最终结果如下所示：

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

【问题讨论】：

你想用新字符列表替换旧字符列表，还是将新字符追加到旧字符列表中？
@j08691 我想根据匹配的数据值用新列表中的名称覆盖旧列表的 li id 和 html 名称。
好的，在下面的回答中，我为您提供了两种可能性的解决方案。我将为覆盖代码添加一个 jsFiddle。

标签： jquery foreach each

【解决方案1】：

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

或者根据data属性改变old_characters中每个li的完整html：

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

【讨论】：

【解决方案2】：

这里有两种可能性：

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。

【讨论】：