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，在同一.entry-title中找到<article>并将其附加：

$( '.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>

将元素移动到与类最接近的其他元素

2 个答案:

Here's a fiddle