.slice 和 .wrapall

Posted 2023-02-23

【中文标题】.slice 和 .wrapall

【英文标题】：.slice and .wrapall

【发布时间】：2011-03-24 01:28:21

【问题描述】：

我正在使用 *** 上的一位成员建议的一些代码，并由我改编以将每 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 的“配额”。这当然会严重破坏我的菜单。 如需示例，请访问此处。

有没有人建议我如何解决这个问题？

【问题讨论】：

如果从ul > li 中删除> 会怎样？

【参考方案1】：

您是否尝试过像这样使用类作为 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 上，这不好.. ;)

【参考方案2】：

你的问题是你的选择器。由于sizzle 从右到左工作，它只会查询所有具有UL element 作为直接父级的LI elements（通常总是如此）。

所以，分开你的ULs。

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

【讨论】：

感谢安迪的信息 - 抱歉，我对 jQuery 很陌生。我想我理解你所说的背后的逻辑，但不幸的是，我无法获得你发送的代码 sn-p 用于我上面包含的演示......这也不会最终将每 3 li 包装在一个页面上?将 ul.list-content 指定为 ul 会更好吗？感谢您的任何建议

hmmn - 抱歉，上面的代码仍然不满意。它对你有用吗？

@csbourne：好吧，我在 jsfiddle.net/cbnFX 胡闹，它至少可以满足我的期望 :) 但我没有那个插件可用。

抱歉，我的代码中有一个小错误。您是救生员 - 感谢您的帮助！