javascript - 在每个容器内移动 DOM 中的元素

Question

我正在研究基于卡片的布局。每张卡片内都有有关产品的详细信息。其中之一是电话号码，写为实际号码(例如 555-555-5555)。

我想要做的是清空文本值，用 Material 设计图标替换它，然后将元素移动到卡片 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)) 应该可以正常工作。