как группировать элементы списка с помощью JQuery

Question

Может кто-нибудь помочь мне преобразовать следующий HTML

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

в одну эту

<ul> 
    <li class="li_group"> 
    <ul> 
     <li>1</li> 
     <li>2</li> 
    </ul> 
    </li> 
    <li class="li_group"> 
    <ul> 
     <li>3</li> 
     <li>4</li> 
    </ul> 
    </li> 
</ul 

с помощью JQuery?

Спасибо!

Answer 1

Следующая следует сделать трюк ...

var $liWrapper = $("<li class='li_group'><ul></ul></li>"); 
$("li").slice(0,2).wrapAll($liWrapper) 
     .end() 
     .slice(2,4).wrapAll($liWrapper); 

Answer 2

Я предполагаю, что вы можете в конечном итоге нужно сделать это для различного числа элементов. Мое решение включает цикл while. Откорректируйте номер в состоянии while() и в селекторе для: lt (2), чтобы захватить другое количество элементов списка.

<ul id="divide"> 
    <li>1</li> 
    <li>2</li> 
    <li>3</li> 
    <li>4</li> 
</ul> 


<script type="text/javascript"> 
while ($('ul#divide > li[class!="li_group"]:lt(2)').length >= 1) { 
    $('ul#divide > li[class!="li_group"]:lt(2)') 
     .wrapAll('<li class="li_group"><ul></ul></li>'); 
} 
</script> 

В процессе отладки я использовал этот CSS, чтобы гарантировать, что я создавал правильный HTML.

<style type="text/css"> 
ul { border: 1px solid #f00; } 
.li_group { border: 1px solid #00f; } 
</style> 

Answer 3

Вот мое решение:

функция

Jquery:

jQuery.fn.groupListElement = function() { 

    var $list = $(this[0]); 
    var args = arguments[0] || {}; 
    var groupClassName = args.groupClassName || 'li_group'; 
    var size = args.size || 2; 

    if ($list.length > 0) { 

     var wrapper = '<li class="' + groupClassName + '"><ul></ul></li>'; 

     while ($('> li[class!="' + groupClassName + '"]',$list).slice(0, size).length >= 1) { 
      $('> li[class!="' + groupClassName + '"]',$list).slice(0, size) 
       .wrapAll(wrapper); 
     } 

    } 

    return $list; 

}; 

Вызов функции

$('ul').groupListElement({groupClassName: 'li_group', size : 3}); 

использования с JQuery цикла:

$('ul') 
.groupListElement({groupClassName: 'li_group', size : 3}) 
.cycle(); 

Наслаждайтесь!