在每张幻灯片中将div移到另一个div

Question

我正在尝试将类“ move-button”的div移动到最接近的.et_pb_button_wrapper。但是，这样做会导致将“移动按钮”的所有实例重复添加到每个.et_pb_button_wrapper。

我尝试将代码包装在每个函数中，但这没有用。

$('.et_pb_slide').each(function() {
  $(this).find('.move-button').appendTo('.et_pb_button_wrapper');
});

.et_pb_slide_content,
.et_pb_button_wrapper {
  display: block;
  background: green;
  color: white;
  border: solid #fff 2px;
}

.et_pb_button_wrapper {
  background: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="et_pb_slides">
  <div class="et_pb_slide">
    <div class="et_pb_slide_content">
      <a class="move-button">See Range 1</a>
    </div>
    <div class="et_pb_button_wrapper">
    </div>
  </div>
  <div class="et_pb_slide">
    <div class="et_pb_slide_content">
      <a class="move-button">See Range 2</a>
    </div>
    <div class="et_pb_button_wrapper">
    </div>
  </div>
  <div class="et_pb_slide">
    <div class="et_pb_slide_content">
      <a class="move-button">See Range 3</a>
    </div>
    <div class="et_pb_button_wrapper">
    </div>
  </div>
  <div class="et_pb_slide">
    <div class="et_pb_slide_content">
      <a class="move-button">See Range 4</a>
    </div>
    <div class="et_pb_button_wrapper">
    </div>
  </div>
</div>

我想说的是为每张幻灯片找到.move-button，并将其附加到.et_pb_button_wrapper。显然，这不是正在发生的事情。

jsfiddle:

Answer 1

您需要相对于.et_pb_button_wrapper元素定位button。 .find() / .children()方法可用于定位所需元素。

$('.et_pb_slide').each(function() {
    $(this).find('.move-button').appendTo($(this).find('.et_pb_button_wrapper') );
}); 

$('.et_pb_slide').each(function() {
  $(this).find('.move-button').appendTo($(this).find('.et_pb_button_wrapper'));
});

.et_pb_slide_content,
.et_pb_button_wrapper {
  display: block;
  background: green;
  color: white;
  border: solid #fff 2px;
}

.et_pb_button_wrapper {
  background: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="et_pb_slides">
  <div class="et_pb_slide">
    <div class="et_pb_slide_content">
      <a class="move-button">See Range 1</a>
    </div>
    <div class="et_pb_button_wrapper">
    </div>
  </div>
  <div class="et_pb_slide">
    <div class="et_pb_slide_content">
      <a class="move-button">See Range 2</a>
    </div>
    <div class="et_pb_button_wrapper">
    </div>
  </div>
  <div class="et_pb_slide">
    <div class="et_pb_slide_content">
      <a class="move-button">See Range 3</a>
    </div>
    <div class="et_pb_button_wrapper">
    </div>
  </div>
  <div class="et_pb_slide">
    <div class="et_pb_slide_content">
      <a class="move-button">See Range 4</a>
    </div>
    <div class="et_pb_button_wrapper">
    </div>
  </div>
</div>