Create from wordpress post attachments

Question

My goal is to strip the images and iframes out of WordPress posts (they are in .para divs) and move them to a <ul> above the post, just inside the local wrapper (.wrapper940).

I have written this code, which as far as I can see should work. Any help very much appreciated.

jQuery("document").ready (function($){

// First I set up a conditional loop: if images or iframes are found in .para, do the following
if ( $(".para img, .para iframe").length > 0) {

    // ... create the <ul>
    var newUl = $("<ul></ul>");
    // and move it to the desired location, just inside .wrapper940
    newUl.prependTo($(this).parents(".wrapper940"));

    // Now I start the loop for each image or iframe found
    $(this).each(function() {

        // For each one I create an <li> element.
        var newLi = $("<li></li>");

        // Now I put the li element into the <ul> that I created above
        newLi.appendTo($(this).parents("newUl"));

        // Last I put 'this' into the new <li>.
        newLi.append(this);

        });
    });
});

I have created a jsfiddle here to show this in context with the html.

The html is:

<div class="news-item-wrap">
    <div class="date">the date</div>
    <div class="wrapper940">
        <div class="title">the title</div>
        <div class="para">
            <p>The main content of the post.</p>
            <p>Which could be several paragraphs</p>
            <p>And include iframes...</p>
            <p><iframe src="//www.youtube.com/embed/uGMbZNTym-g" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen">...</iframe>
            </p>
            <p>Followed by more text... and maybe some images....</p>
            <p><a href="http://www.joujouka.org/wp-content/uploads/2014/05/festival-interculture.jpg"><img class="alignnone size-medium wp-image-404" alt="festival intercultural" src="http://www.joujouka.org/wp-content/uploads/2014/05/festival-interculture-213x300.jpg" width="213" height="300"/></a>
            </p>
        </div>
    </div>

<div class="news-item-wrap">
    <div class="date">the date</div>
    <div class="wrapper940">
        <div class="title">the title</div>
        <div class="para">
            <p>A second post would follow like this.</p>
            <p>Which could also be several paragraphs</p>
            <p>And include iframes...</p>
            <p><iframe src="//www.youtube.com/embed/uGMbZNTym-g" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen">...</iframe>
            </p>
            <p>Followed by more text... and maybe some images....</p>
            <p><a href="http://www.joujouka.org/wp-content/uploads/2014/05/festival-interculture.jpg"><img class="alignnone size-medium wp-image-404" alt="festival intercultural" src="http://www.joujouka.org/wp-content/uploads/2014/05/festival-interculture-213x300.jpg" width="213" height="300"/></a>
            </p>
        </div>
    </div>

This would continue for as many posts as there were. So I need to be able to move the images and iframes FOR EACH POST to appear just inside the .wrapper940 that wraps EACH POST. (i.e. above the title of each post.) I think that using .parents() is sending all images and iframes from all posts to the first .wrapper940; .closest() seems like it should work, but doesn't, maybe because it breaks the loop?

Answer 1

The li you create have no parent or parents when you create them. Also .parents("newUl") is using invalid selector which would be looking for a tagName newul.

It is better to do all the appending of the new elements outside the DOM and then only make one append at the end

var newUl = $("<ul></ul>");    

// Now I start the loop for each image or iframe found
$(this).each(function () {

    // For each one I create an <li> element.
    var newLi = $("<li></li>");

    // Now I put the li element into the <ul> that I created above
    newLi.appendTo(newUl);

    // Last I put 'this' into the new <li>.
    newLi.append(this);

});

// now that all the children are created, make one DOM insertion only     
newUl.prependTo($(this).parents(".wrapper940"));

Answer 2

Some basic mistakes:

• After you close the if condition with }, you added a );, which breaks the script
• You forgot to add jQuery on your jsFiddle

---

Main corrections:

1

You did a great script, but the main mistake was the this reference all over the script. When you do a condition like:

if ( $(".para img, .para iframe").length > 0) {
    $(this).(...)
}

The jQuery does not understand that the $(this) is related to the $(".para img, .para iframe") into the if ( $(".para img, .para iframe").length > 0){ condition.

My approach is create a new var to match elements:

    var matchesEl = $(".para img, .para iframe");
    if ( matchesEl.length > 0) {
        var newUl = $("<ul></ul>");
        newUl.prependTo(matchesEl.parents(".wrapper940"));

        matchesEl.each(function() {
            ...
        }
    }

---

2 Into your each loop, the jQuery understands the $(this), but you used only this. Convert: newLi.append(this); to newLi.append($(this));

As @charlietfl said, the information above is not true.

---

3

And there is no $(this).parents("newUl")) because newUl is a var, it isn't an element. Convert:

newLi.appendTo($(this).parents("newUl"));

to

newLi.appendTo(newUl);

---

Tip

You can use this:

var newLi = $("<li></li>");
newLi.append(this);
newLi.appendTo(newUl);

as a chained single line:

var newLi = $("<li></li>").append(this).appendTo(newUl);

Or if you won't use newLi as a var, you don't need create it. You could do only:

$("<li></li>").append(this).appendTo(newUl);

---

Check jsfiddle for full code:

• With newLi: http://jsfiddle.net/c57Nd/1/
• Without newLi: http://jsfiddle.net/c57Nd/2/

CodenPen - Code working: http://codepen.io/anon/pen/qzuha (Jsfiddle website is out right now).