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

フィドル

または、データ属性に基づいて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

ここに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());
});​

ソリューション＃2のjsFiddleの例。

于 2012-04-26T20:16:14.453 に答える