jQuery 循环创建 div 并将内容附加到它们

Posted 2023-04-13

【中文标题】jQuery 循环创建 div 并将内容附加到它们

【英文标题】：jQuery loop to create divs and append content to them

【发布时间】：2014-07-17 19:13:08

【问题描述】：

我正在尝试创建一个 jQuery 循环：

在相关的 WordPress 帖子中搜索任何图像或 iframe 为每一个创建一个新的 div 并将图像或 iframe 插入到 div 中 在视觉上重新排序，以便这些新创建和新填充的 div 出现在我想要它们的位置（在本例中位于帖子和帖子标题上方）。

我已经尝试了一个多星期来完成这个，并且已经接近了，但总是有问题。

jQuery("document").ready (function()
   jQuery(".para img, iframe").each(function()
      jQuery(this).prependTo(jQuery(this).parents(".wrapper940"));

      var ndiv = jQuery("<div></div>");
      jQuery(ndiv).append(this);
   )
);

所以在上面的代码中，我在 .para 类中搜索任何图像或 iframe，然后在它们上运行一个“每个”函数以将它们添加到帖子的父级 (.wrapper940)，然后一旦它们启动在那里我尝试为每个图像/iframe 创建一个新的 div。

使用这个特定版本的代码，它根本不显示图像或 iframe，所以我假设我需要以某种方式“打印”ndiv 元素？我的图像和 iframe 是否消失在变量中，因此不再显示？

对于迂回和可能过于具体的帖子感到抱歉；我对自己正在处理的问题了解得不够多，无法提出更尖锐的问题。

【问题讨论】：

我不知道你的 html 结构是什么，但是一旦你创建了新元素，你必须将它们附加到现有的 DOM 元素中。

您需要将选择器从 '.para img, iframe' 更改为 '.para img, .para iframe'。

josmh - 谢谢，但这并不能解决主要问题

这就是我发表评论的原因；）我正在努力回答这个问题。

@pmandell - 你能更具体一点吗？我以前有这个（也没有工作）：jQuery(".para img, iframe").each(function() var ndiv = jQuery("<div></div>"); jQuery(ndiv).append(this); jQuery(ndiv).prependTo(jQuery(this).parents(".wrapper940")); )

【参考方案1】：

您首先将 img 或 iframe 附加到您的“.wrapper940”，然后立即将您的 img/iframe 附加到未连接到任何东西的新创建的 div 中。您的第一个操作完全被第二个操作撤消（通过将其附加到 div，您会自动将其从包装器中删除）。我假设您实际上希望首先将所有图像和帧附加到一个新的 div 项，然后该 div 项才是实际放入包装器中的那个...

jQuery("document").ready (function()
   jQuery(".para img, iframe").each(function()
      // First I create the div element.
      var ndiv = jQuery("<div></div>");

      // Now I put the div element into the wrapper, instead of the 'this'
      ndiv.prependTo(jQuery(this).parents(".wrapper940"));

      // Last I put 'this' into the div.
      ndiv.append(this);
   )
);

【讨论】：

天哪！就这样结束了为期一周的疯狂沮丧。很快。谢谢！！

Np 伙计，我做过很多次同样的事情。有时很难看到。

感谢您的解释 - 现在我明白了。

快速跟进问题：如果我现在想定位这些新创建的 div 并向 :first 添加一个类，我该怎么做？我可以在 .each 中执行此操作，还是需要在循环之外执行？我是否需要 jQuery("ndiv, or this, or the class I added to the new divs")??非常感谢您的帮助。

您可能希望在循环之外执行此操作，但您需要以某种方式选择您的 div。一旦你这样做了，你可以使用 JQuery 的 first() 函数来影响找到的第一个项目。