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 Cycle一起使用：

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

享受！

如何使用jquery对列表元素进行分组

3 个答案: