как сгруппировать элементы списка с помощью 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();

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