在每个容器内移动 DOM 中的元素答案

【问题标题】：Move element in DOM within each container在每个容器内移动 DOM 中的元素
【发布时间】：2017-03-06 15:42:17
【问题描述】：

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

我要做的是清空文本值，用材料设计图标替换它，然后将元素移动到卡片 DOM 中的另一个位置。

这就是我正在尝试的...

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

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

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

【问题讨论】：

.text() 将覆盖，无需清空它然后使用.append()。只需执行$('.phone').append('<i class="material-icons">textsms</i>')。另外请分享您的 DOM 和您要移动元素的位置，我不知道您要将它们移动到哪里。
我希望每个.phone 附加到其各自的li.card。 .phone 当前嵌套在 .card 的深处。我只需要指出正确的方向，以及这种通用方法是正确的还是我看错了。

标签： javascript jquery

【解决方案1】：

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

要修复，只需将 $('.phone') 替换为 $(this).find('.phone')

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

【讨论】：

完美，这正是我一直在寻找的，并帮助我立即解决了问题。谢谢！