Question

我有一个很长的列表：

<ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
    <li>item 5</li>
    <li>item 6</li>
    <li>item 7</li>
    <li>item 8</li>
    <li>item 9</li>
    <li>item 10</li>
    <li>item 11</li>
    ...
</ul>

我希望以某种方式将一些div包围起来：

<ul>
    <div>
        <li>item 1</li>
        ...
        <li>item 6</li>
    </div>

    <div>
        <li>item 7</li>
        ...
        <li>item 12</li>
    </div>

    <div>
        ...
    </div>
</ul>

我该如何做到这一点？

我试过.after('</div><div>');但它不起作用，它增加了<div></div>。

Answer 1

你可以这样做来快速包装它们，产生适当的HTML，如下所示：

var lis = $("ul li");
for(var i = 0; i < lis.length; i+=6) {
  lis.slice(i, i+6).wrapAll("<li class='li_group'><ul></ul></li>");
}

这导致：

<ul>
  <li class='li_group'>
    <ul>
      <li>item 1</li>
      <li>item 2</li>
      <li>item 3</li>
      <li>item 4</li>
      <li>item 5</li>
      <li>item 6</li>
    </ul>
  </li>
  <li class='li_group'>
    <ul>
      <li>item 7</li>
      <li>item 8</li>
      <li>item 9</li>
      <li>item 10</li>
      <li>item 11</li>
      <li>item 12</li>
    </ul>
  </li>
  ...      
</ul>

只需要在视觉上设置li_group样式。

Answer 2

你不能（嗯，你可以，但你不应该）在列表中插入DIV元素，因为UL只能包含LI元素。

您可以做的是创建嵌套列表UL-> LI -> UL -> LI, LI, LI。另一个解决方案是将一些特定的CSS类分配给必须绑定在一起的项目，然后将一些特定的样式应用于这些元素。

更新：如果你真的需要这样做，你可以试试这个：

var d= $("ul").prepend("<DIV />");
var itms = $("ul li:lt(6)");
d.append(items);

Answer 3

您可以使用jquery wrap：

$('li').each(function() {
     $(this).wrap($('<div/>', { 'class': 'myClass'}));
   });

这应该包含每个li的{{1}}和<div class="myClass">每个div的结尾。

Answer 4

我刚用jQuery构建了自己的问题版本。想我会分享它，因为我自己找不到答案，希望它有所帮助。

这是因为您有一个已经创建的ul-li列表，并且在创建它时无法将它们组合在一起。

var $liBlockCount = parseInt($('ul li').length/10);
var $lis = $('ul li');

if($liBlockCount > 1)
{
    for(var i = 0; i < $liBlockCount; i++)
    {
        if(i == 0)
        {
            $lis.filter(':lt(10)').wrapAll('<span class="section'+i+'"></span>');
        } else {
            $lis.filter(':gt('+((i*10)-1)+'):lt(10)').wrapAll('<span class="section'+i+'"></span>');
            // chaining gt and lt is tricky, since gt starts from 0 and lt starts from gt. So I am using lt(10) to get the next 10.
        }
    }
} else {
    console.log('less than 11 items in list');
}

将6个元素组合在一起列出很长的列表

4 个答案: