.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 из следующего родительского меню заполнят «квоту» 3 li в div. Это, конечно, сильно портит мои меню. Для примера, пожалуйста, посетите здесь.

У кого-нибудь есть предложения, как мне это исправить?

Answer 1

Ваша проблема - ваш селектор.Поскольку sizzle работает справа налево, он просто запросит все LI elements, у которых UL element является прямым родителем (что обычно всегда так).

Итак, отделите ваш 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>");
}

Но если вы не знали, я предупреждаю вас, что вы разрушаете дом .. вы помещаете div на ul, что нехорошо ..;)