Question

我正在处理基于卡片的布局。每张卡片内都有关于该产品的详细信息。其中一个是电话号码，写为实际号码（例如555-555-5555）。

我要做的是清空文本值，将其替换为材质设计图标，然后将元素移动到卡片DOM中的其他位置。

这是我正在尝试的...

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

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

我尝试过使用$（this），但似乎无法使用它。当我在没有each（）的情况下编写它时，它会在每张卡上多次放置每个电话号码图标，这就是我开始使用.each（）方法的原因。任何帮助将不胜感激。

Answer 1

你的问题不在appendTo中，它在第一个$('.phone')。那就是选择class = phone的所有元素，而不仅仅是你正在迭代的特定li.card中的元素。因此，当.each（）到达最后一个li.card时，它会占用所有其他电话元素并将它们附加到最后一张卡片上。

要解决此问题，只需将$('.phone')替换为$(this).find('.phone')

即可

然后，正如您最初尝试的那样，.appendTo($(this))应该可以正常工作。