为了账号安全,请及时绑定邮箱和手机立即绑定

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 关注
  • 467 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信