Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – How to move a child element from one parent to another parent, and place it in a specific location on mobile resize?

Lets say I have this HTML:

<div class="wrapper">
  <div id="wrapperItems" class="container">
    <div class="row belowContent">
      <div class="favoriteContainer"></div>
      <div class="bottomExcerpt">
        <p>HTML links are hyperlinks. You can click on a link and jump to another document.</p>
      </div>
    </div>
  </div>
</div>

  
<div class="wrapperTwo">
  <div id="wrapperItemsTwo" class="container">
    <div class="row belowContent">
      <div class="picture">
        <div class="symbol"></div>
      </div>
      <div class="smallhyperlinks">
        <h2 class="hidden">H2 Text</h2>
      </div>
    </div>
  </div>
</div>

On mobile ONLY, I want to move .bottomExcerpt from .wrapper and place it in wrapperTwo after .smallhyperlinks and before .picture.

So basically the structure of .wrapperTwo on mobile(580) will be
.smallhyperlinks
-> .bottomExcerpt
-> .picture.

How can I do this using jQuery?

I tried the following, but it doesn’t work properly:

$(window).resize(function () {
  if ($(window).width() < 580) 
  {
    $('.wrapperTwo .picture').insertAfter('.wrapperTwo .smallhyperlinks');
    $('.smallhyperlinks h2').removeClass('hidden');
    if ($('.wrapper .bottomExcerpt').length > 0) {
      $('.wrapper .bottomExcerpt').insertAfter('.wrapperTwo .smallhyperlinks');
    }
  } 
  else 
  {
    $('.wrapperTwo .smallhyperlinks').insertAfter('.wrapperTwo .picture');
    $('.smallhyperlinks h2').addClass('hidden'); 
  }
});

For some reason, bottomExcerpt is showing up below picture, but I want it to show between smallhyperlinks and picture. How can I fix this issue? Or is there a different approach to solving this problem?

Tags:

2

Answers


  1. 0

    Do not move Element.

    Create bottomExcerpt Element in wrapper and wrapperTwo.

    show bottomExcerpt in wrapperTwo when $(window).width() < 580

    Login or Signup to reply.
  2. 0 
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
</head>

<body>
    <div class="wrapper">
        <div id="wrapperItems" class="container">
            <div class="row belowContent">
                <div class="favoriteContainer"></div>
                <div class="bottomExcerpt">
                    <p>HTML links are hyperlinks. You can click on a link and jump to another document.</p>
                </div>
            </div>
        </div>
    </div>


    <div class="wrapperTwo">
        <div id="wrapperItemsTwo" class="container">
            <div class="row belowContent">
                <div class="picture">
                    <div class="symbol"></div>
                </div>
                <div class="smallhyperlinks">
                    <h2 class="hidden">H2 Text</h2>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    $(window).resize(function onResize() {
        if ($(window).width() < 580) {
            if ($('.wrapper .bottomExcerpt').length > 0) {
                $('.wrapperTwo .picture').insertAfter('.wrapperTwo .smallhyperlinks');
                $('.smallhyperlinks h2').removeClass('hidden');
                $('.wrapper .bottomExcerpt').insertAfter('.wrapperTwo .smallhyperlinks');
            } else {
                $('.wrapperTwo .picture').insertAfter('.wrapperTwo .bottomExcerpt');
                $('.smallhyperlinks h2').removeClass('hidden');
            }
        } else {
            $('.wrapperTwo .picture').insertBefore('.wrapperTwo .smallhyperlinks');
            $('.smallhyperlinks h2').addClass('hidden');
        }
    })
</script>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search