javascript - jQuery prependTo() 选择器

Question

我有这样的代码:

<div class="usa_img_bg">
  <div class="ca_title">Lorem Ipsum</div>
  <div class="img_box">
    <div class="photo_room_f">
      <p>Lorem Ipsum dolor si amet...</p>
    </div>
  </div>
</div>

<div class="usa_img_bg">
  <div class="ca_title">Lorem Ipsum</div>
  <div class="img_box">
    <div class="photo_room_f">
      <p>Lorem Ipsum dolor si amet...</p>
    </div>
  </div>
</div>

我想获取 ca_title div 并将其移动到每个 usa_img_bg 的 photo_room_f div 中。

我使用这个代码:

$.each($('.usa_img_bg'), function(index, element) { 
    $(element).children(".ca_title").prependTo(".photo_room_f");
});

但它为我提供了所有标题并将它们全部放在每个 usa_img_bg div 上。 我怎样才能让它只获得每个usa_img_bg中的ca_title？

提前致谢!

Answer 1

代码中的问题是您要附加到所有 .photo_room_f 元素，您需要 find() 与 .usa_img_bg 相关的元素迭代的。试试这个:

$('.usa_img_bg').each(function(i, e) { 
    var $room = $(this).find(".photo_room_f");
    $(this).find(".ca_title").appendTo($room);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="usa_img_bg">
  <div class="ca_title">Lorem Ipsum</div>
  <div class="img_box">
    <div class="photo_room_f">
      <p>Lorem Ipsum dolor si amet...</p>
    </div>
  </div>
</div>

<div class="usa_img_bg">
  <div class="ca_title">Lorem Ipsum</div>
  <div class="img_box">
    <div class="photo_room_f">
      <p>Lorem Ipsum dolor si amet...</p>
    </div>
  </div>
</div>