.slice 和 .wrapall

Question

我正在使用 stackoverflow 上的一位成员建议的一些代码，并由我进行修改，将每 3 个列表项包装为大型菜单的一部分。代码是：

var lis = $("ul > li");
for(var i = 0; i < ls.length; i+=3) {
  lis.slice(i, i+3).wrapAll("<div class='new'></div>");
}

不幸的是，这将从下一个父菜单中获取子 li，以填充 div 中 3 li 的“配额”。这当然严重扰乱了我的菜单。 例如，请访问此处。

有人对我如何解决这个问题有任何建议吗？

Answer 1

你的问题是你的选择器。由于 sizzle 从右到左工作，因此它只会查询所有以 UL 元素 作为直接父元素的 LI 元素（通常始终是案件）。

因此，请分隔您的 UL。

$('ul').each(function(){
   var $lis = $(this).children('li');
   for(var i = 0, len = $lis.length; i < len; i+=3){          
     $lis.slice(i, i+3).wrapAll("<div class='new'></div>");
  }
});

Answer 2

您是否尝试过使用类作为 ht 选择器来应用它？

var lis = $("ul.list-content > li");
for(var i = 0; i < lis.length; i+=3) {
  lis.slice(i, i+3).wrapAll("<div class='new'></div>");
}

但如果你不知道，我警告你，你正在破坏 dom.. 你把 div 放在 ul 上，这是不好的..;)