Question

我有一个子菜单列表，我想将每个4个孩子<li></li>分别移到新的父母<ul></ul>

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

我正在寻找的最终输出写在下面：

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

到目前为止我尝试过的代码是

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

您是否知道如何实现最终输出？

Answer 1

您可以为div设置id并使用每种方法

QByteArray rxBuffer;
void MainWindow::serialReceive()
{
   rxBuffer.append(serialRx -> readAll());
   while(rxBuffer.contains("@") && rxBuffer.contains("$")) {
      QByteArray message;

      // Discard any data preceding message start character
      rxBuffer = rxBuffer.right(rxBuffer.length() - rxBuffer.indexOf("@"));

      // Take first complete message from the buffer
      message = rxBuffer.left(rxBuffer.indexOf("$") + 1);

      // Remove extracted message from buffer
      rxBuffer = rxBuffer.right(rxBuffer.length() - rxBuffer.indexOf("$") - 1);

      // Your code here

   }
}

$(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)
    }
    })
    
});

Answer 2

这就是我想做的。

$('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>

Answer 3

您可以这样做：

HTML

<wizard-button>

JS

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

基本上，我们得到li元素，将其分为两部分并创建两个数组。然后遍历每一个并附加html

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

如何在jQuery中将子元素移动到新的父元素？

3 个答案: