0

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

4

2 回答 2

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

小提琴

要替换 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'));
    });    
});​

小提琴

或根据 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());
    });    
});​

小提琴

或者只是将 new_characters 的 HTML 放入 old_characters：

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

小提琴

于 2012-04-26T20:14:42.133 回答
0

这里有两种可能性：

1）将新字符附加到旧字符列表中：

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

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

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

解决方案 #2 的jsFiddle 示例。

于 2012-04-26T20:16:14.453 回答