用jQuery包装东西

我需要在包装器div/span中获取一些列表元素。现在是这样的：

<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
</ul>

一个
两个
三
四
五
六

我需要的是这样的东西：

<ul>
<div class="wrapper">
<li>One</li>
<li>Two</li>
</div><div class="wrapper">
<li>Three</li>
<li>Four</li>
</div><div class="wrapper">
<li>Five</li>
<li>Six</li>
<div class="wrapper">
</ul>

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

<ul>
  <li class="wrapper">
    <ul>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ul>
  </li>
  <li class="wrapper">
    <ul>
      <li>Four</li>
      <li>Five</li>
      <li>Six</li>
    </ul>
  </li>
</ul>

一个
两个
三
四
五
六

---

或者那可能是像斯潘这样的人。没关系。但我需要在每三个li元素后换行。

这不是有效的HTML，这样做是错误的-您不能在列表中插入div，但我将给出jQuery中换行的语法，以供将来参考：

$("JQUERYSELECTOR").wrap("<div class='wrapper'></div>");

对于列表的第一个子项

---

但同样，在列表项上包装div是错误的。

您可以在元素上迭代并使用and包装它们，如下所示：

<ul>
<div class="wrapper">
<li>One</li>
<li>Two</li>
</div><div class="wrapper">
<li>Three</li>
<li>Four</li>
</div><div class="wrapper">
<li>Five</li>
<li>Six</li>
<div class="wrapper">
</ul>

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

<ul>
  <li class="wrapper">
    <ul>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ul>
  </li>
  <li class="wrapper">
    <ul>
      <li>Four</li>
      <li>Five</li>
      <li>Six</li>
    </ul>
  </li>
</ul>

var-lis=$（“ul-li”）；
对于（变量i=0；i
）；
}

既然您说了类似于

/

的内容，那么这就可以完成任务，并为您提供有效的HTML，如下所示：

<ul>
<div class="wrapper">
<li>One</li>
<li>Two</li>
</div><div class="wrapper">
<li>Three</li>
<li>Four</li>
</div><div class="wrapper">
<li>Five</li>
<li>Six</li>
<div class="wrapper">
</ul>

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

<ul>
  <li class="wrapper">
    <ul>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ul>
  </li>
  <li class="wrapper">
    <ul>
      <li>Four</li>
      <li>Five</li>
      <li>Six</li>
    </ul>
  </li>
</ul>

一个
两个
三




四
五
六

---

您的示例每2个元素显示一次，但您的问题文本每3个元素显示一次……我刚刚在这里选择了3个元素，只需调整函数中的数字，您就可以完成设置。

这是无效的HTML-

li

列表项是无序列表可以包含的唯一内容。如果您需要多列列表，您是否考虑过使用浮点或CSS3列来代替？您期望的输出不是有效的HTML。不建议在页面中包含此类HTML