如何附加到最近的 div（按类）？

Posted 2023-03-11

【中文标题】如何附加到最近的 div（按类）？

【英文标题】：How to appendTo closest div (by class)?

【发布时间】：2011-05-05 09:12:04

【问题描述】：

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

这是我目前有效的代码：

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

但是，当我尝试移动它时，页面上的所有图像要么移动到一个 div 内（而不是移动到它们的父 div (".newsItem")），要么什么都没有发生。

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

上面没有做任何事情：

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

上面的那个将它们全部移动到第一个.newsItemdiv。

这是 html 的 sn-p：

<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>

【参考方案1】：

您需要使用.each() 进行循环，因此this 在您执行时引用每个元素，如下所示：

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

既然.appendTo() 无论如何都会被翻转到.append()，那么走这条路会更有效率。