使用jQuery将WordPresspost附件移动到每个post动态创建的列表？

我的目标是从WordPresspost中剥离图像和iframe（它们在.para div中）并将它们移动到post上方的

，就在本地包装器（.wrapper940）内部。

下面的jQuery工作，但将所有post中的所有图像和iframe移动到第一篇文章上方的单个新

。 而不是这个，我试图将图像和iframe PER POST移动到每个post的包装内的新
。

这是jQuery：

 jQuery("document").ready (function($){ var matchesEl = $(".para img, .para iframe"); if ( matchesEl.length > 0) { var newUl = $("
"); newUl.prependTo(matchesEl.parents(".wrapper940")); matchesEl.each(function() { var newLi = $("
").append($(this)).appendTo(newUl); }); } }); 

html是：

 
 
the date
 
 
the title
 
 
The main content of the post.
 
Which could be several paragraphs
 
And include iframes...
 
... 
 
Followed by more text... and maybe some images....
 
 
 
 
 
 
the date
 
 
the title
 
 
A second post would follow like this.
 
Which could also be several paragraphs
 
And include iframes...
 
... 
 
Followed by more text... and maybe some images....
 
 
 
  

对于尽可能多的post，这将继续下去。 因此，我需要能够将每个POST的图像和iframe移动到包含每个POST的.wrapper940内部。 （即高于每个职位的标题。）

我认为使用.parents()将所有post中的所有图像和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) { $('
').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. //$("
").append($(this)).appendTo($('.wrapper940 ul').eq(index)); //So the right code is: $("
").append($(this)).appendTo($('.wrapper940').eq(index).children('ul')); }); } $('p').filter(function () { return $.trim(this.innerHTML) == "" }).remove(); }); }); 

评论代码：

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

2） index var这里$('.wrapper940').each(function(index){对于匹配此行中的右边ul很重要： $("

").append($(this)).appendTo($('.wrapper940 ul').eq(index));

3）这一行将删除空白

标签： $('p').filter(function () { return $.trim(this.innerHTML) == "" }).remove(); 将内容移动到

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 。

3）你可以简化：

 var newUl = $("
"); newUl.insertBefore($(this).children('.title')); 

至

 $('
').insertBefore($(this).children('.title')); 

并从此到

 $('
').insertBefore($(this).children('.title')); 

4）函数appendTo() ， insertBefore()和similars已经是一种回声。 我相信如果元素存在，jQuery将移动它。 如果它不存在，jQuery将创建它，但我无法确切地确认。

5）这个明确的

标签的技巧对我来说也是有点神奇的。 我不确切知道它是如何工作的。 我从这里得到了代码： 用jQuery删除“空”段落