使用 class 将元素移动到最近的其他元素

Question

我在页面上有多篇文章，但我想将 h2 标题移动到（最近的）flexslider div 因为我想要图像上的标题，但我无法让它工作。

HTML:

<article>
    <div class="flexslider"></div>
    <div class="post-content">
        <h2 class="entry-title">Title text</h2>
    </div>
</article>

我想要的：

<article>
    <div class="flexslider">
        <h2 class="entry-title">Title text</h2>
    </div>
    <div class="post-content"></div>
</article>

JS 对我不起作用：

jQuery('article h2.entry-title').appendTo( jQuery('.flexslider') );

Answer 1

您可以使用 append( function )。对于每个 .flexslider，在同一个 <article> 中找到 .entry-title 并附加它：

$( '.flexslider' ).append( function() {
    return $( this ).closest( 'article' ).find( '.entry-title' );
} );

Here's a fiddle

Answer 2

试试这个...

$("#appendTo").click(function() {
  $(".entry-title").appendTo($(".flexslider"));
});
$("#prependTo").click(function() {
  $(".entry-title").prependTo($(".flexslider"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flexslider" >sss</div>
    <div class="post-content" >
        <h2 class="entry-title">Title text</h2>
    </div>
    <button id="appendTo">appendTo main</button>
<button id="prependTo">prependTo main</button>

使用 class 将元素移动到最近的其他元素

Move element to closest other element with class

jquery

move

closest

Here's a fiddle