How do I move children elements to a new parent element in jQuery?

Related searches

I have a list of submenus and I want to move each 4 child <li></li> to a new parent <ul></ul> separately

<ul class="sub_menu">
    <li>Menu 1</li>
    <li>Menu 2</li>
    <li>Menu 3</li>
    <li>Menu 4</li>
    <li>Menu 5</li>
    <li>Menu 6</li>
    <li>Menu 7</li>
    <li>Menu 8</li>
</ul>

<div class="container_row">
    <div class="row">

        <div class="col1 col_3">
            <div class="wrap">
                <ul>

                </ul>
            </div>
        </div>

        <div class="col1 col_3">
            <div class="wrap">
                <ul>

                </ul>
            </div>
        </div>

    </div>
</div>

The final output that I am looking for is written below:

<div class="container_row">
    <div class="row">

        <div class="col1 col_3">
            <div class="wrap">
                <ul>
                    <li>Menu 1</li>
                    <li>Menu 2</li>
                    <li>Menu 3</li>
                    <li>Menu 4</li>
                </ul>
            </div>
        </div>

        <div class="col1 col_3">
            <div class="wrap">
                <ul>
                    <li>Menu 5</li>
                    <li>Menu 6</li>
                    <li>Menu 7</li>
                    <li>Menu 8</li>
                </ul>
            </div>
        </div>

    </div>
</div>

The code I've tried so far is

$(document).ready(function() {
    $(".container_row .wrap ul").append($(".sub_menu li"));
});

Do you have any idea how to achieve the final output?

This is kind of what you are trying to do I think.

$('ul.sub_menu li').each(function (i) {
  const index = Math.trunc(i / 4);
  $(this).detach().appendTo($('div.wrap ul').get(index));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="sub_menu">
    <li>Menu 1</li>
    <li>Menu 2</li>
    <li>Menu 3</li>
    <li>Menu 4</li>
    <li>Menu 5</li>
    <li>Menu 6</li>
    <li>Menu 7</li>
    <li>Menu 8</li>
</ul>

<div class="container_row">
    <div class="row">
        <div class="col1 col_3">
            <div class="wrap">
                <ul></ul>
            </div>
        </div>
        <div class="col1 col_3">
            <div class="wrap">
                <ul></ul>
            </div>
        </div>
    </div>
</div>

How to move child element from one parent to another using jQuery , Given a jQuery object that represents a set of DOM elements, the parent() method traverses elements in the DOM tree and constructs a new jQuery object from the matching elements. Shows the parent of each element as (parent > child). Class Attribute � Copying � DOM Insertion, Around � DOM Insertion, Inside � DOM� If you want to move child element in the same container (referring to author div) you need navigate to the parent container and insert the author div above the date container. Case 1 - Exact Target Move child element in the same container (using relative target ):

You can set id for div and use each method like this

$(document).ready(function() {
    var length = $(".sub_menu li").length;
    //console.log(length)
    $(".sub_menu li").each(function(index, item){
    if(index < length/2){
        $("#first ul").append(item);
        //console.log($(".container_row .wrap ul:nth-child(0)").length)
    }else{
       $("#second ul").append(item);
       //console.log(index)
    }
    })
    
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="sub_menu">
    <li>Menu 1</li>
    <li>Menu 2</li>
    <li>Menu 3</li>
    <li>Menu 4</li>
    <li>Menu 5</li>
    <li>Menu 6</li>
    <li>Menu 7</li>
    <li>Menu 8</li>
</ul>

<div class="container_row">
    <div class="row">

        <div class="col1 col_3">
            <div class="wrap" id="first">
                <ul>

                </ul>
            </div>
        </div>

        <div class="col1 col_3">
            <div class="wrap" id="second">
                <ul>

                </ul>
            </div>
        </div>

    </div>
</div>

jQuery, A selector, element, HTML string, array of elements, or jQuery object; the moved into the target (not cloned) and a new set consisting of the inserted element is� The children () method returns all direct children of the selected element. The DOM tree: This method only traverse a single level down the DOM tree. To traverse down multiple levels (to return grandchildren or other descendants), use the find () method.

You can do it like this:

HTML

<ul id="set-1">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
    <li>item 5</li>
    <li>item 6</li>
    <li>item 7</li>
    <li>item 8</li>
</ul>

<ul id="set-2"></ul>

JS

jQuery(document).ready(function($)
{
    let list = $('#set-1').find('li'),
        midRange = Math.ceil(list.length / 2),
        first = list.slice(0, midRange),
        last = list.slice(midRange);

    $('#set-1').html('');

    first.each(function() {$('#set-1').append('<li>'+ $(this).html() +'</li>')});
    last.each(function() {$('#set-2').append ('<li>'+ $(this).html() +'</li>')});
});

essentially we get the li elements, split that count in two and create two arrays. Then loop through each and append the html

jsfiddle: https://jsfiddle.net/rquo7nk9/

.parent(), parents() method allows us to search through the ancestors of these elements in the DOM tree and construct a new jQuery object from the matching elements� Basically, you want to loop through each direct descendent of the old-parent node, and move it to the new parent. Any children of a direct descendent will get moved with it. var newParent = document.getElementById('new-parent'); var oldParent = document.getElementById('old-parent'); while (oldParent.childNodes.length > 0) { newParent.appendChild(oldParent.childNodes[0]); }

.appendTo(), Use contents () method to select all the direct children, including text and comment nodes for the selected element. Selected elements are stored in a variable. Now, use replaceWith () method to replace the content of parent element by its all child element which is stored into a variable.

.parents(), You can also use this method to move an element from one element to another. Tip: Use the insertBefore() method to insert a new child node before a specified, existing, child node. So you can do that to do the job, this is what I created for you, using appendChild(), run and see how it works for your case:

Given a jQuery object that represents a set of DOM elements, the parent() method traverses to the immediate parent of each of these elements in the DOM tree and constructs a new jQuery object from the matching elements. This method is similar to .parents(), except .parent() only travels a single level up the DOM tree. Also, $( "html" ).parent() method returns a set containing document whereas $( "html" ).parents() returns an empty set. The method optionally accepts a selector expression of

Comments
  • Possible duplicate of stackoverflow.com/questions/42692498/…