如何将元素添加到最近的具有特定类名的 div 中？

Question

我正在尝试使用jQuery查找文本中的图像，将图像包装在div中，然后将其移动到另一个div中，但似乎无法使其正常工作。

这是我目前拥有的代码：

$(".newsIntro").find("img").wrap("<div class=\"newsImage\" />");

但是，当我尝试移动它时，所有页面上的图像都会移动到一个div（而不是移动到它们的父div（“.newsItem”）），或者什么也不会发生。

$(".newsImage").appendTo( $(this).closest(".newsItem") );

上述内容没有任何作用：

$(".newsImage").appendTo(".newsItem");

上面的代码会将所有内容移动到第一个.newsItem div中。

以下是HTML的示例代码:

<div class="newsItem">
  <div class="newsHeader">
    <h2><a href="/news-information/67-latest-news-03.html">Latest News 03</a></h2>
  </div>
  <div class="newsIntro"><img src="/images/stories/opals-are-lucky/img_abopal_lucky.jpg" border="0" align="left" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce dictum sagittis sapien. Aliquam erat volutpat. Nulla facilisi. Ut purus neque, condimentum nec,
    auctor eget, semper ut, enim. Vestibulum sem tellus, vestibulum a, vehicula ut, feugiat id, libero. Pellentesque enim justo, condimentum sed, dictum at, viverra eget, odio. Aliquam feugiat metus id lacus. Cum sociis natoque penatibus et magnis dis
    parturient montes, nascetur ridiculus mus. Nam iaculis iaculis quam. Donec eu dui.</div>
  <div class="clear"></div>
</div>

<div class="newsItem">
  <div class="newsHeader">
    <h2><a href="/news-information/68-latest-news-03.html">Latest News 03</a></h2>
  </div>
  <div class="newsIntro"><img src="/images/stories/about-us/img_showroom.jpg" border="0" align="right" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce dictum sagittis sapien. Aliquam erat volutpat. Nulla facilisi. Ut purus neque, condimentum nec, auctor eget,
    semper ut, enim. Vestibulum sem tellus, vestibulum a, vehicula ut, feugiat id, libero. Pellentesque enim justo, condimentum sed, dictum at, viverra eget, odio. Aliquam feugiat metus id lacus. Cum sociis natoque penatibus et magnis dis parturient montes,
    nascetur ridiculus mus. Nam iaculis iaculis quam. Donec eu dui.</div>
  <div class="clear"></div>
</div>

- SoulieBaby

Answer 1

你需要使用.each()遍历，这样this在你遍历过程中就会引用每个元素，像这样：

$(".newsImage").each(function() {
  $(this).closest(".newsItem").append(this);
});

由于 .appendTo() 最终会变成 .append()，因此这种方式更有效率。

- Nick Craver