Question

我在页面上有许多ul个元素。我想人为地限制它可以包含的li元素的数量。当达到该限制时，我希望它溢出到页面上的下一个ul（直到它达到限制并溢出到下一个）。等等。

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

在上面的示例中，我将其限制为4个列表项，然后溢出到下一个<ul>：

<ul>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
</ul>

我想使用jquery来做这件事。谢谢。

Answer 1

假设您有这样的元素数组，请尝试以下代码

var items = [1,2,3,4,5,6,7,8];

var count = 0;
var ul;
$.each(items, function(){
  if(count == 0)
   ul = $("<ul />").appendTo(document.body);

  ul.append("<li>"+this+"</li>");

  count = (count + 1) % 4;
});

Answer 2

这应该遍历每个ul并插入第一个未满的ul。

function insert(el){
   $('ul').each(function(_, ul){
       if($(ul).children('li').length >=4)
           return true;
       $(ul).append(el);
       return false;
   }
}

将一个ul元素溢出到下一个元素中

2 个答案: