使用jQuery将WordPress帖子附件移动到每个帖子动态创建的列表中吗? [英] Use jQuery to move WordPress post attachments to per-post dynamically-created lists?

问题描述

我的目标是将图像和iframe从WordPress帖子中删除(它们位于.para divs中)，并将它们移动到帖子上方的<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>

这将继续保持与以前一样多的帖子.因此，我需要能够将图像和iframe移动到每个POST中，使其出现在包装每个POST的.wrapper940内部. (即，在每个帖子的标题上方.)

我认为使用.parents()会将所有帖子中的所有图像和iframe发送到第一个.wrapper940； .closest()似乎应该起作用，但是不起作用，也许是因为它打破了循环吗?

非常感谢任何帮助！

解决方案

检查此内容:

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，但是我想您想将元素<a>与<img>一起移动，因此可以使用:.para a:has(img).

2)此处$('.wrapper940').each(function(index){的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

在评论中回答您的问题:

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)具有更多属性，如我们在此处看到的: $之间的差异(this)和jquery 中的this，但使用$(...)会消耗更多的处理时间.因此，您始终可以测试两种情况是否都适用，并且仅使用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>标签的技巧对我来说也是一种魔术.我不知道它是如何工作的.我从这里获得了代码:删除"empty" jQuery的段落

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

The jQuery below works, but moves ALL image and iframes from all posts to a single new <ul> above the first post. Instead of this, I am trying to move the images and iframes PER POST to a new <ul> just inside the wrapper of each post.

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

        });

    }   
});

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?

Any help very much appreciated!

解决方案

Check this:

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

Commenting code:

1) If you want only to move the image, you use .para img, but I think you want to move the element <a> with the <img>, so you can use: .para a:has(img).

2) The index var here $('.wrapper940').each(function(index){ is important to match the right ul in this line: $("<li>").append($(this)).appendTo($('.wrapper940 ul').eq(index));

3) This line will remove blank <p> tags: $('p').filter(function () { return $.trim(this.innerHTML) == "" }).remove(); after you move their content into <li>s

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

Answering your questions in comments:

1) The index is the index number of your element matched in each(). The base number is 0. So if you have 10 .wrapper940 in your page, the first one will have index = 0, the second will have index = 1, til the last and 10th will have index = 9. We use it here to force code not send the img and iframes to the wrong .wrapper940. It says img and iframes from .wrapper940 index 6 belongs to .wrapper940 index 6. Writing this I just discovered a fail in my code. Check the code above to see the changes.

2) I always used this for pure javascript and $(this) for jquery. It seems like $(this) have more properties, like we see here: Difference between $(this) and this in jquery but using the $(...) consume more processing. So you can always test if both works on each case and use just this.

3) You can simplify:

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

To

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

And from this to

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

4) The funcion appendTo(), insertBefore() and similars are already a kind of echo. I believe that if the element exist, the jQuery will move it. If it won't exist, jQuery will create it, but I can't confirm conclusively.

5) This trick of clear <p> tags is kind magic to me too. I don't know exactly how it works. I got the code from here: Remove "empty" paragraphs with jQuery

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