使用jQuery将WordPress帖子附件移动到每个动态创建的帖子div？

这是另一个问题的一个变体，回答得很好

我需要使用jQuery将WordPress帖子附件（图像和iFrame）移动到帖子本身之外的一个新div中，并在每篇帖子的基础上这样做（以便每篇帖子的图像和iFrame在本地帖子包装器中保持本地）

我当前的代码几乎完成了这一点，但在第一篇文章中，将所有文章中的所有图像和iFrame移动到一个新的div中

以下是jQuery：

jQuery("document").ready (function($){
var matchesEl = $("section img, section iframe");
if ( matchesEl.length > 0) {

    var newDiv = $("<div />", {'class': 'royalSlider'});
    newDiv.prependTo(matchesEl.parents("section"));

    matchesEl.each(function() {

        $(this).addClass('rsImg').appendTo(newDiv);

    });

}   
});

jQuery（“文档”）.ready（函数（$）{
var matchesEl=$（“部分img，部分iframe”）；
如果（匹配sel.length>0）{
var newDiv=$（“”，{'class'：'royalSlider'}）；
newDiv.prependTo（matchesEl.parents（“章节”）；
matchesEl.each（函数（）{
$（this.addClass（'rsImg'）.appendTo（newDiv）；
});
}   
});

以下是jQuery使用之前的html：

<section class="active">
<p>
    <a href="<a href="http://www.freshorigins.com/wp-content/uploads/2013/05/good21-copy.jpg"><img class="alignnone size-full wp-image-61" src="http://www.freshorigins.com/wp-content/uploads/2013/05/good21-copy.jpg" alt="gallery_1286896812" width="980" height="651"></a>"></a>
    <a href="<a href="http://mediapresentations4u.com/wp-content/uploads/2014/06/flower-delivery-online.jpg"><img class="alignnone size-full wp-image-61" src="http://mediapresentations4u.com/wp-content/uploads/2014/06/flower-delivery-online.jpg" alt="gallery_1286896812" width="980" height="651"></a>"></a>
</p>
</section>

<section>
<p>
    <a href="<a href="http://www.freshorigins.com/wp-content/uploads/2013/05/good21-copy.jpg"><img class="alignnone size-full wp-image-61" src="http://www.freshorigins.com/wp-content/uploads/2013/05/good21-copy.jpg" alt="gallery_1286896812" width="980" height="651"></a>"></a>
    <a href="<a href="http://mediapresentations4u.com/wp-content/uploads/2014/06/flower-delivery-online.jpg"><img class="alignnone size-full wp-image-61" src="http://mediapresentations4u.com/wp-content/uploads/2014/06/flower-delivery-online.jpg" alt="gallery_1286896812" width="980" height="651"></a>"></a>
</p>
</section>

">
">


">
">

还有几个

---

这是可行的，但它从所有

中获取图像和iframe，并将它们移动到第一个

中。看起来您正在捕获所有图像和iframe元素，而不是特定于节

以下两行中的一行应选择每个部分的元素

matchesEl = $("section .active img, section .active iframe");   //adding .active class to narrow the results


newDiv.prependTo(matchesEl.parents("section .active"));    //adding .active class to prepend only to active section.

---

希望这会有所帮助！

这与链接的问题和答案的逻辑相同。正如我们在另一个答案上所看到的，逻辑是：如果要对每个

部分执行操作，必须使用
$（'section'）。each（）
就像您使用的
$（'.wrapper940'）。each（）
另一个答案。剩下的代码基本上是另一个用新元素和类编辑的代码：

jQuery("document").ready (function($){
  // Elements you want to match
  var matchesEl = "img, iframe"

  // For each section, get its index number and do the following:
  $('section').each(function(index){

    //If there is a matched element (for each section),
    if ($(this).find(matchesEl).length > 0) {

      // create a div.royalSlider and prepend to this section
      $('<div>', {'class': 'royalSlider'}).prependTo(this)

      // For each matched element into this section (we don't need to get index number here), 
      $(this).find(matchesEl).each(function() {

        // add .rsImg class to this element and insert on the div.royalSlider,
        // not any div.royaSlider, but that one with equivalent index given before
        $(this).addClass('rsImg').appendTo($('section .royalSlider').eq(index));

      });

    }

  });
});

及

但是请参见，因为
.royalsloider
不是直接父母，不是兄弟姐妹，它实际上是一个“叔叔”。因此，您必须找到“祖父”进行第二次搜索以查找其子女，因为在这种情况下，这将不起作用：

$(this).addClass('rsImg').appendTo($(this).closest('section .royalSlider'));

因此，我认为使用索引eq（）方法更为优雅。我希望您理解它是如何说“这是来自section.eq（33）的，所以请在section.eq（33）中插入它，而不是在您找到的第一节中”

提示：

索引变量，不需要被称为
index
。它是一个变量名。你可以像
i
那样给它命名

也许您不仅希望将
img
移动到
div
，而且希望将
img
中的
a
链接移动到
img
，这样您就可以使用
a:has（img）
来匹配它

它将生成空的
p
标记，因此您可以使用该
$（'p'）.filter（函数（）{return$.trim（this.innerHTML）==“”。）.remove（）；

Codepen：
非常感谢您在这方面花费的时间和精力。很好的解决方案，优雅的代码，极好的解释。非常感谢。不客气，@user2654408。链接的问题有一个错误，我已经编辑、更正和评论过了。我原以为我们在这里也会有相同的错误，但我在Codepen上进行了测试，它成功了无需更正。我更新了代码笔，其中包含没有匹配元素可供检查的案例部分。嗨，利奥，我已经发布了一个后续问题。对你来说应该很简单，但我遇到了问题。
$(this).addClass('rsImg').appendTo($(this).closest('section').children('.royalSlider'));

$(this).addClass('rsImg').appendTo($(this).closest('section .royalSlider'));