Use jQuery to move WordPress post attachments to p

Question

This is a variant on another question brilliantly answered here.

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.

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.

Here's the 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);

    });

}   
});

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>

There would be several more <sections>.

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

Answer 1

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

      });

    }

  });
});

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(){

And

$(this).addClass('rsImg').appendTo($(this).closest('section').children('.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'));

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

Tips:

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.

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.

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

Answer 2

It looks like you are grabbing all the image and iframe elements and not section specific.

One of the below two lines should select the elements per section.

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.

Hope this helps!