如何使用jQuery将元素移动到另一个父对象

Question

您好，有人可以帮我将class =“ title”移到class =“ thumbnail”以下但跨度高的地方吗？花了整整一天的时间在工作，但没有运气。我更喜欢使用jQuery。我希望有人可以帮助我解决这个问题。提前非常感谢您。

<div class="aa">
    <div class="title">
        <a href="#">Test 1</a>
    </div>
    <div class="content">
        <div class="thumbnail">
            <span>Hello</span>
            <a href="#"><img src=""></a>
        </div>
    </div>
</div>

<div class="aa">
    <div class="title">
        <a href="#">Test 1</a>
    </div>
    <div class="content">
        <div class="thumbnail">
            <span>Hello</span>        
            <a href="#"><img src=""></a>
        </div>
    </div>
</div>

<div class="aa">
    <div class="title">
        <a href="#">Test 1</a>
    </div>
    <div class="content">
        <div class="thumbnail">
            <span>Hello</span>        
            <a href="#"><img src=""></a>
        </div>
    </div>
</div>

我希望输出如下所示：

<div class="aa">
    <div class="content">
        <div class="thumbnail">
            <div class="title">
                <a href="#">Test 1</a>
            </div>
            <span>Hello</span>
            <a href="#"><img src=""></a>
        </div>
    </div>
</div>

<div class="aa">
    <div class="content">
        <div class="thumbnail">
            <div class="title">
                <a href="#">Test 1</a>
            </div>
            <span>Hello</span>
            <a href="#"><img src=""></a>
        </div>
    </div>
</div>

<div class="aa">
    <div class="content">
        <div class="thumbnail">
            <div class="title">
                <a href="#">Test 1</a>
            </div>
            <span>Hello</span>
            <a href="#"><img src=""></a>
        </div>
    </div>
</div>

非常感谢您。

Answer 1

您可以使用此：

$(".title").each(function() {
  $(this).prependTo($(this).next(".content").find(".thumbnail"));
});

这会将您的每个title移动到相应的thumbnail的顶部

演示

$(".title").each(function() {
  $(this).prependTo($(this).next(".content").find(".thumbnail"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="aa">
  <div class="title">
    <a href="#">Test 1</a>
  </div>
  <div class="content">
    <div class="thumbnail">
      <span>Hello</span>
      <a href="#"><img src=""></a>
    </div>
  </div>
</div>

<div class="aa">
  <div class="title">
    <a href="#">Test 1</a>
  </div>
  <div class="content">
    <div class="thumbnail">
      <span>Hello</span>
      <a href="#"><img src=""></a>
    </div>
  </div>
</div>

<div class="aa">
  <div class="title">
    <a href="#">Test 1</a>
  </div>
  <div class="content">
    <div class="thumbnail">
      <span>Hello</span>
      <a href="#"><img src=""></a>
    </div>
  </div>
</div>