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并将其移至photo_room_f div中，每usa_img_bg个。{/ p>

我使用此代码：

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

但它获取了所有标题并将它们全部放在每个usa_img_bg div上。如何让它只获得每个ca_title中的usa_img_bg？

提前致谢！

Answer 1

您在element内使用的选择器是标准的jquery选择器，并且它不知道您只对当前的photo_room_f感兴趣，所以它将是返回页面上的所有元素，其类为$.each($('.usa_img_bg'), function(index, element) { var $el = $(element); $el.children(".ca_title").prependTo($el.find(".photo_room_f")); });。

尝试这样的事情：

find..

Answer 2

您的代码中的问题是您要附加到所有.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>

Answer 3

试试这个：

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

Answer 4

尝试使用jQuery()

的context参数

.prependTo($(".photo_room_f", element));

其中element为context：.usa_img_bg

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.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>

jQuery prependTo（）选择器

4 个答案: