使用jQuery将WordPress帖子附件移动到按帖子动态创建的div上吗? [英] Use jQuery to move WordPress post attachments to per-post dynamically-created divs?

问题描述

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

This is a variant on another question brilliantly answered here.

我需要使用jQuery将WordPress帖子附件(图像和iframe)移动到帖子本身之外的新div，并按帖子进行操作(以便每个帖子的图像和iframe保持在其本地，在本地后包装中.

I need to use jQuery to move WordPress post attachments - images and iframes - to a new div outside of the post itself, and to do this on a per-post basis (so that each post's images and iframes stay local to it, within the local post wrapper.

我当前的代码几乎完成了此任务，但是将所有图片和iframe从所有帖子移到了第一篇帖子中的一个新的div中.

My current code almost accomplishes this, but moves all of the images and iframes from ALL posts into one new div in the first post.

这是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在其上运行之前的html:

And here's the html before the jQuery works on it:

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

还会有几个<sections>.

这可行，但是它会从所有<sections>中获取图像和iframe，并将它们移到第一个<section>中.

This works, but it takes the images and iframes from all <sections> and moves them into the first <section>.

推荐答案

与所链接的问题和答案的逻辑相同.正如我们在另一个答案上看到的那样，逻辑是:如果要对每个section进行操作，则必须像在另一个答案上使用$('.wrapper940').each()一样使用$('section').each().其余的代码基本上是用新的elemnets和类编辑的另一代码:

It is the same logic from the linked question and answer. As we saw on the other answer, the logic is: If you want to do an operation for each section, you have to use a $('section').each() like you used $('.wrapper940').each() on another answer. The rest of the code is basically the another one edited with your new elemnets and classes:

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

      });

    }

  });
});

您可以使用parents()或closest()代替index和eq().理解元素之间的含义会更容易.您可以改用以下行:

You could use parents() or closest() instead of index and eq(). It would be more easy to understand realtions between elements. You use this lines instead:

$('section').each(function(){

还有

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

但是请注意，由于.royalSlider不是直接父级，也不是同级，因此它实际上是一个叔叔".因此，您必须找到祖父"以进行第二次搜索以找到其子代，因为在这种情况下这将无法工作:

But see, as the .royalSlider is not direct parent, not a sibling, it is actually an "uncle". So you have to find the "grandfather" to make a second search to find its children, since this will not work in this case:

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

因此，我认为使用索引eq()方法会更优雅.我希望您能理解它说的是这是来自section.eq(33)，因此请将其插入section.eq(33)，而不要插入找到的第一部分."

So I think it is more elegant using the index, eq() approach. I hope you understood how it says "this is from section.eq(33) so insert it on section.eq(33) and not on the first section you found".

提示:

索引var，不需要称为index.这是一个变种名称.您可以像i这样命名.

The index var, don't need to be called index. It is a var name. You can name it the way you want like i.

也许您不仅希望将img移至div，而且要将其移至img中的a链接，所以您可以使用a:has(img)进行匹配.

Maybe you want to move not only the img to the div, but the a link within the img, so you can use a:has(img) to match it.

它将生成空的p标记，因此您可以使用$('p').filter(function () { return $.trim(this.innerHTML) == "" }).remove();

And it will generate empty p tags, sou you can use that $('p').filter(function () { return $.trim(this.innerHTML) == "" }).remove();

Codepen : http://codepen.io/anon/pen/yBIbF

这篇关于使用jQuery将WordPress帖子附件移动到按帖子动态创建的div上吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！