4

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?

TylerH
  • 20,799
  • 66
  • 75
  • 101
redshot
  • 2,930
  • 3
  • 31
  • 68
  • Possible duplicate of https://stackoverflow.com/questions/42692498/split-list-of-elements-into-groups?rq=1 – 04FS Apr 29 '19 at 13:15

3 Answers3

5

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>
Hien Nguyen
  • 24,551
  • 7
  • 52
  • 62
5

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>
Daniel Cottone
  • 4,257
  • 24
  • 39
3

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/

treyBake
  • 6,440
  • 6
  • 26
  • 57