Question

关于此的任何想法，博客页面中有博客列表，每个博客中都有图像，博客标题，摘要内容等。博客的设计是图像，标题，内容和元。我需要将标题移到图像上方，因此我使用了insertBefore。我的问题是博客中的所有标题都向上移动，因此在每个单个博客中都有大量的博客标题，因为我使用插入。有什么方法可以防止它捕获所有标题？

jQuery( ".bd-blog-header h2" ).insertBefore( ".bd-post-image" );

我也尝试过

jQuery( ".blog-list" ).each(function( index ) {
  jQuery(this).find(".bd-post-image").append(jQuery(this).find(".bd-blog-header h2"))
});

这是一个样本

<div class="container">
     <div class="img"></div>
     <div class="body">
         <h2>title</h2>
         <p>sample</p>
     </div>
     <div class="meta"></div>
</div>

<div class="container">
     <div class="img"></div>
     <div class="body">
         <h2>title</h2>
         <p>sample</p>
     </div>
     <div class="meta"></div>
</div>

我想要两个将img的h2向上放置，但是发生的事情是这样的

<div class="container">
     <h2>title</h2>
     <h2>title</h2>
     <div class="img"></div>
     <div class="body">
         <p>sample</p>
     </div>
     <div class="meta"></div>
</div>
<div class="container">
     <h2>title</h2>
     <h2>title</h2>
     <div class="img"></div>
     <div class="body">
         <p>sample</p>
     </div>
     <div class="meta"></div>
</div>

我想要的是这样

<div class="container">
     <h2>title</h2>
     <div class="img"></div>
     <div class="body">
         <p>sample</p>
     </div>
     <div class="meta"></div>
</div>
<div class="container">
     <h2>title</h2>
     <div class="img"></div>
     <div class="body">
         <p>sample</p>
     </div>
     <div class="meta"></div>
</div>

Answer 1

选择每个帖子的父元素，然后循环浏览它们。在每次迭代中，在其中找到h2，然后在您选择的父级内的图像上方向上移动。

$('.container').each(function(index, element) {
 $(this).find('h2').insertBefore($(this).find('.img'));
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
     <div class="img">image here</div>
     <div class="body">
         <h2>title</h2>
         <p>sample</p>
     </div>
     <div class="meta"></div>
</div>

<div class="container">
     <div class="img">image here</div>
     <div class="body">
         <h2>title</h2>
         <p>sample</p>
     </div>
     <div class="meta"></div>
</div>

Answer 2

以供将来参考

jQuery( ".container" ).each(function( index ) {
  jQuery(this).find(".img").prepend(jQuery(this).find("h2"))
});

jQuery一次移动单个元素

2 个答案: