CODEWITHSUNDEEP
jqueryhtml
grafix777
grafix777

Reputation: 3

How do I limit the move to one div?

I have a modal window that is generated via code I cannot alter. This modal window has the close button in the top right of the screen. I need to take that close button and move the container to the container for the modal content so that I can position the button within the content window, not the overlay.

I wrote some jQuery to move the element and it does that and puts it where I want, the problem I'm having is that it's moving all of the close buttons from all of the modals to all of the modals.

How do I limit the move to only one div that has the close button so that I don't have multiple close buttons in each modal window?

My jQuery:

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

HTML before execution:

<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 after execution:

<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>

Thank you in advance for any help given!

Upvotes: 0

Views: 122

Answers (1)

Kermit
Kermit

Reputation: 1062

following code is helpful for you:

$(function () {
  $('.move').click(function () {
    $('.ult-overlay-close').each((index, item) => {
      $(item).appendTo($(item).prev())
    })
  })
})
.ult_modal-content {
  width:100px;
  height:50px;
  border: 1px solid #f00;
}
<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>

Upvotes: 0

Related Questions