各コンテナ内のDOM内の要素を移動する

Question

私はカードベースのレイアウトを作成しています。各カード内には製品に関する詳細が表示されます。そのうちの1つは、実際の番号（例：555-555-5555）として書かれた電話番号です。

私がしようとしているのは、テキスト値を空にし、それを素材デザインアイコンに置き換え、要素をカードDOM内の別の場所に移動することです。

は、ここで私は、私は$（this）を使用して試した

$('#mainPage li.card').each(function(){ 

    $('.phone').text('').append('<i class="material-icons">textsms</i>').appendTo(WHAT HERE?); 
}); 

...努力しているが、それが動作するように見えることはできませんものです。 私はeach（）を使わずに書きましたが、各カードに電話番号のアイコンを何度も置くので、.each（）アプローチを始めました。どんな助けでも大歓迎です。

Answer 1

あなたの問題はappendToにはありません。最初のものは$('.phone')です。これは、反復している特定のli.card内のものだけでなく、class = phoneを持つすべての要素を選択していることです。したがって、.each（）が最後のli.cardに到達すると、それは他のすべての電話要素を取り、それらを最後のカードに追加します。

はちょうどあなたが最初にしようとしたとして、 .appendTo($(this))が正常に動作する必要があり、その後、 $(this).find('.phone')

として$('.phone')を交換、修正します。