jQueryの - 私は次のコードを持っている別の要素

Question

に各HTML（）クラスの値を設定します -

HTML

<div id="nottingham-park-wrapper"> 
    <div id="notts-main-court" class="icon-wrapper"> 
    <span class="park-marker"></span> 
    </div> 
    <span id="notts-main-court-info" class="notts-info"> 
    <h2 class="infobox-title">TITLE 1</h2> 
    <p class="infobox-desc">TEXT INFO 1</p> 
    </span> 
    <div id="notts-dodgeball" class="icon-wrapper"> 
    <span class="park-marker"></span> 
    </div> 
    <span id="notts-dodgeball-info" class="notts-info"> 
    <h2 class="infobox-title">TITLE 2</h2> 
    <p class="infobox-desc">TEXT INFO 2</p> 
    </span> 
</div> 

<hr> 

<span class="mobile-notts-info"></span> 

をjQueryの

jQuery(".notts-info").each(function(index) { 
     var notts_info = jQuery(this).html(); 
     jQuery(this).html(''); 
     jQuery(".mobile-notts-info").html(notts_info); 
    }); 

VIEW JSFIDDLE

基本的にはそれぞれを移動したい.notts-info htmlを.mobile-notts-info

現在のところ、各ループの最後の値だけを移動していますが、どのようにすべての値を取得できますか？ （この例では2つしかありませんが、実際のバージョンにはもっと多くの要素があり、それぞれの要素を別々に行う代わりにそれぞれを使いたいのです）

ありがとうございます！

Answer 1

.html()は、既存のコンテンツを削除し、新しいものを追加します。そのため、ターゲットの親には最後のコンテンツしか利用できません。既存の保存と親の最後の子として新しいコンテンツを追加する.append()の代わり.html()を使用する必要があります。

jQuery(".mobile-notts-info").append(notts_info); 

Working Demo

あなたは要素を反復処理する必要はありません。しかし、あなたはあなたを減らすことができますコードへ：

jQuery(".mobile-notts-info").append(jQuery(".notts-info")); 

Optimised Code working Demo