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 - 將字符從一個列表傳輸到另一個列表

回答

相關問題