Question

我有一个模态窗口，通过我无法改变的代码生成。此模态窗口在屏幕的右上角有关闭按钮。我需要使用关闭按钮并将容器移动到容器中以获取模态内容，以便我可以将按钮放在内容窗口中，而不是叠加层。

我写了一些jQuery来移动元素，然后把它放到我想要的地方，我遇到的问题是它将所有模态中的所有关闭按钮移动到所有模态。

如何将移动限制为只有一个具有关闭按钮的div，以便每个模态窗口中没有多个关闭按钮？

我的jQuery：

jQuery(document).ready(function() {
    jQuery(".ult-overlay").ready(function() {
        jQuery(".ult-overlay-close").appendTo(".ult_modal-content");
    });
});

执行前的HTML：

<div class="ult-overlay">
    <div class="ult_modal-content">
    </div>
    <div class="ult-overlay-close">Close</div>
</div>
<div class="ult-overlay">
    <div class="ult_modal-content">
    </div>
    <div class="ult-overlay-close">Close</div>
</div>
<div class="ult-overlay">
    <div class="ult_modal-content">
    </div>
    <div class="ult-overlay-close">Close</div>
</div>

执行后的HTML：

<div class="ult-overlay">
    <div class="ult_modal-content">
    </div>
    <div class="ult-overlay-close">Close</div>
    <div class="ult-overlay-close">Close</div>
    <div class="ult-overlay-close">Close</div>
</div>
 <div class="ult-overlay">
    <div class="ult_modal-content">
    </div>
    <div class="ult-overlay-close">Close</div>
    <div class="ult-overlay-close">Close</div>
    <div class="ult-overlay-close">Close</div>
</div>
<div class="ult-overlay">
    <div class="ult_modal-content">
    </div>
    <div class="ult-overlay-close">Close</div>
    <div class="ult-overlay-close">Close</div>
    <div class="ult-overlay-close">Close</div>
</div>

提前感谢您提供任何帮助！

Answer 1

以下代码对您有所帮助：

＆＃13;

$(function () {
  $('.move').click(function () {
    $('.ult-overlay-close').each((index, item) => {
      $(item).appendTo($(item).prev())
    })
  })
})

＆＃13;

.ult_modal-content {
  width:100px;
  height:50px;
  border: 1px solid #f00;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ult-overlay">
    <div class="ult_modal-content">
    </div>
    <div class="ult-overlay-close">Close</div>
</div>
<div class="ult-overlay">
    <div class="ult_modal-content">
    </div>
    <div class="ult-overlay-close">Close</div>
</div>
<div class="ult-overlay">
    <div class="ult_modal-content">
    </div>
    <div class="ult-overlay-close">Close</div>
</div>
<button type='button' class='move'>move</button>

＆＃13;

如何限制移动到一个div？

1 个答案: