2011-12-07 31 views
0

私はこの問題を抱えています私はバグがどこにあるのか分からないので、私は頭痛を与えています。ここでは、マークアップだ:ユーザーがボタンをクリックするとなぜjqueryが正しく動作しないのですか?

<div class="excerpt"> 
    <p>...</p> 
</div> 

<div class="bio"> 
    <p>...</p> 
</div> 

、私はdiv.excerptに表示するdiv.bioにあるものは何でも表示したいです。ここに私のclick()関数があります。

$('.button').click(function() { 
    var bio = $('.bio p'); 
    var excerpt = $('.excerpt'); 

    // empty 
    excerpt.empty(); 

    // replace 
    bio.appendTo(excerpt); 

}); 

問題は、このコードが追記中のバイオから段落を除去することです。ソースに要素を単に追加して削除しない方法はありますか?それとも別のことをやっているのですか?

答えて

4

appendまたはappendToをDOMツリーの既存の部分に使用すると、実際にはになります。あなたはまた、コピーを追加するcloneを使用する必要が

:この方法を選択された要素が別の場所に挿入されている場合はドキュメントの状態としては、

は、それが は(ないクローン化された)ターゲットに移動されます木の要素の例えば:

bio.clone().appendTo(excerpt); 
+0

これは完璧に機能します。 –

1

append()は、1つの場所から別の要素を移動させます。

$('.button').click(function() { 
    var bio = $('.bio p'); 
    var excerpt = $('.excerpt'); 

    // empty 
    excerpt.empty(); 

    // replace 
    bio.clone().appendTo(excerpt); 

}); 

それとも、明らかに、最初にそれを複製することができます::ある場所から別の場所に要素をコピーするだけでなくclone()を使用

$('.button').click(function() { 
    var bio = $('.bio p').clone(); 
    var excerpt = $('.excerpt'); 

    // empty 
    excerpt.empty(); 

    // replace 
    bio.appendTo(excerpt); 

}); 
+0

ありがとう、これは素晴らしいです。 –

1

はこれを試してみてください、ジョンが提案されているよう:

$('.button').click(function() { 
     var bio = $('.bio p'); 
     var excerpt = $('.excerpt'); 

     // empty 
     excerpt.empty(); 

     // replace 
     bio.clone().appendTo(excerpt); 
}); 
1

その他の回答の一部はおそらく動作しますが、これはかなり簡潔なようです。

$('.button').click(function() { 
    $('.excerpt').html($('.bio').html()); 
}); 
関連する問題