Question

我的目标是从WordPress帖子中删除图片和iframe（它们位于.para div中）并将其移动到帖子上方的<ul>，就在本地包装器内（{{1} }}）。

我已经编写了这段代码，据我所知，该代码应该可行。非常感谢任何帮助。

.wrapper940

我创建了一个jsfiddle here，以便在html的上下文中显示它。

html是：

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

        });
    });
});

这将继续发布尽可能多的帖子。因此，我需要能够将每个POST的图像和iframe移动到包含每个POST的<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>内部。（即在每个帖子的标题之上。）我认为使用.wrapper940将所有帖子中的所有图片和iframe发送到第一个.parents(); .wrapper940似乎应该可行，但不是，可能是因为它打破了循环？

Answer 1

您创建的li在创建时没有父级或父级。另外.parents("newUl")使用无效的选择器，它将寻找tagName newul。

最好在DOM之外进行所有新元素的追加，然后只在最后添加一个

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

一些基本错误：

使用if关闭}条件后，您添加了);，这会破坏脚本
您忘了在jsFiddle上添加jQuery

主要更正：

<强> 1

你做了一个很棒的剧本，但主要的错误是整个剧本的this引用。当您执行以下条件时：

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

jQuery不理解$(this)与$(".para img, .para iframe")条件中的if ( $(".para img, .para iframe").length > 0){相关。

我的方法是创建一个匹配元素的新var：

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

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

~~2 在每个循环中，jQuery理解$(this)，但您只使用this。转换：newLi.append(this);到newLi.append($(this));~~

正如@charlietfl所说，上述信息不正确。

第3

并且没有$(this).parents("newUl"))因为newUl是一个var，它不是一个元素。转换：

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

到

newLi.appendTo(newUl);

提示

您可以使用：

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

作为链式单行：

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

或者，如果您不使用newLi作为var，则不需要创建它。你只能做：

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

检查jsfiddle是否有完整代码：

使用newLi：http://jsfiddle.net/c57Nd/1/

没有newLi：http://jsfiddle.net/c57Nd/2/

<强> CodenPen - 代码工作：http://codepen.io/anon/pen/qzuha（Jsfiddle网站现已发布）。

从wordpress帖子附件</ul>创建<ul>

2 个答案: