亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

jQuery在較小列表中拆分了長長的ul列表

jQuery在較小列表中拆分了長長的ul列表

搖曳的薔薇 2019-12-04 11:08:28
我的UL清單很長,我需要分解成較小的清單,每個清單包含約20個項目。我以為我可以使用類似$(function() {    $("ul li:nth-child(20n)").after("</ul><ul>");});但事實并非如此。知道如何以最少的CPU使用jQuery嗎?
查看完整描述

3 回答

?
紅糖糍粑

TA貢獻1815條經驗 獲得超6個贊

不幸的是,沒有那么簡單(至少我知道)。嘗試以下方法:


$(function() {

  $("ul").each(function() {

    var list = $(this);

    var size = 3;

    var current_size = 0;

    list.children().each(function() {

    console.log(current_size + ": " + $(this).text());

      if (++current_size > size) {

        var new_list = $("<ul></ul>").insertAfter(list);

        list = new_list;

        current_size = 1;

      }

      list.append(this);

    });

  });

});

毫無疑問,您可以將其轉換為以塊大小作為參數的函數,但我將其作為練習留給讀者。


查看完整回答
反對 回復 2019-12-04
?
慕的地8271018

TA貢獻1796條經驗 獲得超4個贊

這是一個工作示例,只需將mod 5更改為mod 20。


<html>

<script type="text/javascript" src="jquery-1.3.2.js"></script>


<script type="text/javascript">


function onLoad(){

   var itemindex = 0;

   var Jlistobj = null;

   $('#list li').each(function()

   {

      if (itemindex % 5 == 0)

      {

         Jlistobj = $("<ul></ul>");

      }

      Jlistobj.append($(this));

      $('#out_div').append(Jlistobj);

      itemindex++;

   });

}


</script>

<body onLoad="onLoad()">


<ul id="list">

<li>item1</li>

<li>item2</li>

<li>item3</li>

<li>item4</li>

<li>item5</li>

<li>item6</li>

<li>item7</li>

<li>item8</li>

<li>item9</li>

<li>item10</li>

<li>item11</li>

<li>item12</li>

<li>item13</li>

<li>item14</li>

<li>item15</li>

<li>item16</li>

<li>item17</li>

<li>item18</li>

<li>item19</li>

<li>item20</li>

</ul>


<div id="out_div"></div>


</body>


</html>


查看完整回答
反對 回復 2019-12-04
  • 3 回答
  • 0 關注
  • 534 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號