Element in DOM innerhalb jedes Containers verschieben

Question

Ich arbeite an einem kartenbasierten Layout. Auf jeder Karte gibt es Details zum Produkt. Eine davon ist die Telefonnummer, die als die tatsächliche Nummer ausgeschrieben ist (z. B. 555-555-5555).

Ich versuche, den Textwert zu leeren, durch ein Materialdesignsymbol zu ersetzen und das Element an eine andere Position innerhalb des Karten-DOMs zu verschieben.

Hier ist, was ich versuche ...

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

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

Ich habe versucht, $ (this) verwenden, aber kann nicht scheinen, dass die Arbeit. Wenn ich es ohne jedes geschrieben habe(), legte es jedes Telefonnummer-Symbol mehrmals auf jeder Karte, weshalb ich den .each() Ansatz begann. Jede Hilfe würde sehr geschätzt werden.

Answer 1

Ihr Problem ist nicht in der AppendTo, es ist in der ersten $('.phone'). Das heißt, alle Elemente mit class = phone auszuwählen, nicht nur diejenigen innerhalb der spezifischen li.card, auf der Sie gerade iterieren. Wenn also .each() zur letzten li.card kommt, werden alle anderen Telefonelemente übernommen und an die letzte Karte angehängt.

zu beheben, ersetzen Sie einfach $('.phone') mit $(this).find('.phone')

und dann, wie Sie ursprünglich versucht, .appendTo($(this)) gut funktionieren sollte.