CODEWITHSUNDEEP
javascriptjquery
nvrwithoutacause
nvrwithoutacause

Reputation: 65

Move element in DOM within each container

I'm working on a card-based layout. Within each card there a details about the product. One of them is the phone number, written out as the actual number (ex. 555-555-5555).

What I'm trying to do is empty the text value, replace it with a material design icon, and move the element to another location within the card DOM.

Here's what I'm trying...

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

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

I've tried using $(this), but can't seem to get that to work. When I wrote it without the each() it put every phone number icon multiple times on each card, which is why I started down the .each() approach. Any help would be greatly appreciated.

Upvotes: 0

Views: 90

Answers (1)

andi
andi

Reputation: 6522

Your problem isn't in the appendTo, it's in the first $('.phone'). That is selecting all elements with class=phone, not just the ones inside the specific li.card you're iterating on. So when the .each() gets to the very last li.card, it takes all the other phone elements and appends them to that last card.

To fix, just replace $('.phone') with $(this).find('.phone')

and then, as you originally tried, .appendTo($(this)) should work fine.

Upvotes: 1

Related Questions