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

Question

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

下面的 jQuery 可以工作，但会将所有帖子中的所有图像和 iframe 移动到第一个帖子上方的单个新 <ul>。而不是这个，我试图将每个帖子的图像和 iframe 移动到每个帖子的包装内的新 <ul>。

这是 jQuery：

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

    var newUl = $("<ul></ul>");
    newUl.prependTo(matchesEl.parents(".wrapper940"));

    matchesEl.each(function() {

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

        });

    }   
});

html 是：

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

这将持续到尽可能多的帖子。因此，我需要能够将每个 POST 的图像和 iframe 移动到包装每个 POST 的 .wrapper940 内。 （即在每个帖子的标题上方。）

我认为使用.parents() 会将所有帖子中的所有图像和iframe 发送到第一个.wrapper940； .closest() 似乎应该可以工作，但没有，可能是因为它打破了循环？

非常感谢任何帮助！

Answer 1

检查一下：

jQuery("document").ready (function($){
  var matchesEl = ".para a:has(img), .para iframe"
  $('.wrapper940').each(function(index){

    if ($(this).find(matchesEl).length > 0) {

      $('<ul>').insertBefore($(this).children('.title'));

      $(this).find(matchesEl).each(function() {
        //The line code under will only works if all your .wrappers940 always have at least one matched element.
        //$("<li>").append($(this)).appendTo($('.wrapper940 ul').eq(index));
        //So the right code is:
        $("<li>").append($(this)).appendTo($('.wrapper940').eq(index).children('ul'));
      });

    }
    $('p').filter(function () { return $.trim(this.innerHTML) == "" }).remove();
  });
});

注释代码：

1）如果你只想移动图像，你可以使用.para img，但我想你想用<img>移动元素<a>，所以你可以使用：.para a:has(img)。

2) index var 这里的 $('.wrapper940').each(function(index){ 对于匹配此行中的正确 ul 很重要：$("<li>").append($(this)).appendTo($('.wrapper940 ul').eq(index));

3) 此行将删除空白的<p> 标签：$('p').filter(function () { return $.trim(this.innerHTML) == "" }).remove(); 在您将其内容移动到<li>s 后

Codepen：http://codepen.io/anon/pen/wDmsi

在 cmets 中回答您的问题：

1) index 是在each() 中匹配的元素的索引号。基数为 0。因此，如果您的页面中有 10 个 .wrapper940，则第一个的 index = 0，第二个的 index = 1，直到最后一个和第 10 个的 index = 9。我们在这里使用它来强制代码不将 img 和 iframe 发送到错误的 .wrapper940。它说来自 .wrapper940 索引 6 的 img 和 iframe 属于 .wrapper940 索引 6。写这个我刚刚发现我的代码失败了。检查上面的代码以查看更改。

2) 我总是将this 用于纯javascript，$(this) 用于jquery。似乎$(this) 有更多的属性，就像我们在这里看到的：Difference between $(this) and this in jquery 但使用$(...) 会消耗更多的处理。因此，您始终可以测试两者是否适用于每种情况并仅使用 this。

3) 你可以简化：

var newUl = $("<ul></ul>");
newUl.insertBefore($(this).children('.title'));

到

$('<ul></ul>').insertBefore($(this).children('.title'));

从这里到

$('<ul>').insertBefore($(this).children('.title'));

4) 函数appendTo()、insertBefore() 和类似函数已经是一种回声。我相信如果元素存在，jQuery 会移动它。如果它不存在，jQuery 会创建它，但我无法确定。

5) 这个清除<p> 标签的技巧对我来说也是一种魔法。我不知道它是如何工作的。我从这里得到代码：Remove "empty" paragraphs with jQuery