CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Dennis
Dennis

Reputation: 605

Javascript moving X divs from one parent to another

in my code there are two divs which contain several more divs. Like so:

echo '<div id="outside-one">';
    echo '<div class="inside" id="1"></div>';
    echo '<div class="inside" id="2"></div>';
    echo '<div class="inside" id="3"></div>';
    echo '<div class="inside" id="4"></div>';
    echo '<div class="inside" id="5"></div>';
    echo '<div class="inside" id="6"></div>';
    echo '<div class="inside" id="7"></div>';
    echo '<div class="inside" id="8"></div>';
    echo '<div class="inside" id="9"></div>';
    echo '<div class="inside" id="10"></div>';
echo '</div>';

echo '<div id="outside-two">';
    echo '<div class="inside" id="11"></div>';
    echo '<div class="inside" id="12"></div>';
    echo '<div class="inside" id="13"></div>';
    echo '<div class="inside" id="14"></div>';
    echo '<div class="inside" id="15"></div>';
    echo '<div class="inside" id="16"></div>';
    echo '<div class="inside" id="17"></div>';
    echo '<div class="inside" id="18"></div>';
    echo '<div class="inside" id="19"></div>';
    echo '<div class="inside" id="20"></div>';
echo '</div>';

The second parent div ( ID 2 ) comes with the css property, display:none;

Whenever a user scrolls to the bottom of the website i want to move five ( or X ammount ) divs from the second parent to the first so that they will be displayed.

I tried to do it with the following js code:

<script>
    document.getElementById('outside-two').appendChild(
        document.getElementById('11')
    );
</script>

The only issue i have here is, that i don't know the exact id numbers of the divs that are in the second parent. They could be in order like in my example above but they also could be out of order.

I think the perfect solution would be to just have a for loop everytime a user scrolls to the bottom. A requirement would for sure be that there are still divs remaining in the second parent.

Is there a way for me to just select X child elements of the parent div? Or does anyone have a better solution? Thanks.

Upvotes: 0

Views: 320

Answers (3)

Lance Jernigan
Lance Jernigan

Reputation: 226

Here's a versatile option (written in vanilla Javascript) you can use to move any amount of children from one element to another.

/*
 *  Setup our variables for easier reference
 */

    var one = document.getElementById('outside-one')  // Our first parent
    var two = document.getElementById('outside-two')  // Our second parent


/*
 *  moveChildren() - function - Moves our children to the passed element
 *
 *  params - from (element) - The parent element we are moving children from
 *         - to (element) - The parent element we are moving children to
 *         - selector (string) - The selector for our children
 *         - count (number) - The amount of children to move
 */

    var moveChildren = function (from, to, selector, count) {

        /*
         *  Get our children from the parent and convert to an array so we can use slice
         */



                /******************************************************************/
                /*    [].slice.call(NodeList) - Converts a NodeList to an array   */
                /******************************************************************/



        var elements = [].slice.call(from.querySelectorAll(selector)).slice(0, count)

        /*
         *  Loop through our children and move them to their new parent
         */

            for (var e = 0; e < elements.length; e++) {

                var element = elements[e]  // Setup our element variable

                to.appendChild(element)    // Move to the new parent

            }

    }

/*
 *  Call move() with our parameters to initiate the move
 */

moveChildren(two, one, '.card', 3)

The function takes four parameters:

  • from - the element you want to move the children from
  • to - the element you want to move the children to
  • selector - the selector for the children
  • count - the number of children to move

You can trigger this move from anywhere, such as when the user scrolls to the bottom of the page, by simply calling the function and passing the parameters.

Here's a link to the working example on CodePen

Upvotes: 0

epascarello
epascarello

Reputation: 207501

Select the children, slice the first five elements, and append them to the other div. 

$('#outside-two').children().slice(0,5).appendTo("#outside-one");

Upvotes: 2

shaedrich
shaedrich

Reputation: 5735

Your code works, but the div with id 11 is already in the div with the id outside-two. You could try it with id 1 instead of 11.

Upvotes: 0

Related Questions