.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 element作為直接父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>");
  }
});

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 上，這是不好的.. ;)