将一组无序列表拆成div，在若干个li项后用jquery

Question

我需要通过插入分隔符

将 div 中包含的一组无序列表分成列

</div><div>

在当前 ul 之后或下一个 ul 之前。

新的 divs 将包含不同的行数，因为 li 被计算仅供参考，但分隔符应仅在下一个关闭和打开 ul 之间插入（在无序列表之间）。

这就是我想要实现的目标： jsFiddle (HTML only)

    <li>Item four</li>
  </ul>
  <!-- need to insert this with jquery dynamically-->
</div><div>
  <!--jquery insert eof -->
  <ul>
    <li>Item five</li>

我尝试了什么（jsFiddle jquery）：

$(document).ready(function() {
  //why does this not work?
  $('li:eq(3)').parent().before('</div><span>This is a test insert</span><div>');
});

div {
  float: left;
  border: 1px solid red;
  padding: 10px;
  margin: 10px;
  background-color: white;
}
span {
  color: green;
  clear: both;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  <ul>
    <li>Item one</li>
  </ul>
  <ul>
    <li>Item two</li>
    <ul>
      <li>Item 2.1</li>
    </ul>
  </ul>
  <ul>
    <li>Item three</li>
  </ul>
  <ul>
    <li>Item four</li>
  </ul>
  <ul>
    <li>Item five
      <ul>
        <li>Item 5.1</li>
        <li>Item 5.2</li>
        <li>Item 5.3</li>
        <li>Item 5.4</li>
        <li>Item 5.5</li>
      </ul>
    </li>
  </ul>
  <ul>
    <li>Item six
      <ul>
        <li>Item 6.1</li>
        <li>Item 6.2</li>
        <li>Item 6.3</li>
      </ul>
    </li>
  </ul>
  <ul>
    <li>Item seven</li>
  </ul>
  <ul>
    <li>Item ten</li>
  </ul>
  <ul>
    <li>Item eleven</li>
  </ul>
  <ul>
    <li>Item twelve</li>
  <ul/>
</div>

Answer 1

首先，您是否看过 CSS 列？他们可以在没有 JS 的情况下做你想做的事：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts

你的问题是你首先需要了解HTML在内部是如何表示的，DOM（文档对象模型）：https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction

它由 "elements" 组成，可以包含元素本身。您可以将元素想象成一个盒子。例如，一个 div 元素，（在您的情况下）包含 ul 元素，而这些元素又包含 li 元素，依此类推。

您在 HTML 源代码中使用的标签只是这些框的文本（人类可读）表示，开始标签 (<div>) 是开始，结束标签 (</div>) 是元素的结尾。

就像在阅读生活中，盒子的顶部或盒子的底部没有意义，你不能通过插入新的 "bottom" 和 [= 将盒子分成两部分79=] 到框的中间。

元素是不可分割的实体。所以它自己的结束标签没有意义，所以你不能那样插入它们。

结论：您不需要拆分 div，而是需要创建一个新的 div，并将元素从原始 div 转移到新的 div，并附加新的 div旧的之后。

间奏曲：首先我们需要确保您使用的是正确的HTML。您的示例 div 包含多个 ul 元素，但每个元素仅包含一个 li。但是，在您的示例 HTML 中，您在 ul 元素之间随地吐痰，但在您的 JavaScript 中，您试图在 li 元素之间进行拆分。

所以你必须选择一个：

a div 填充 ul 并在 ul 或
a ul 填充 li 并在 lis

无论如何，以下代码将在两种情况下独立工作。

还有一个不太清楚的地方是：你到底想在哪里拆分？您的示例 HTML 似乎没有任何迹象表明您想将列表吐到哪里。在这种情况下，我将使用 class 来标记要拆分的位置。如果您需要其他内容，您需要更好地解释它。

回到问题：

$(".split-me").each(function() {
 var elementType = this.nodeName; // Get the element type ("div", "ul", etc.) so we can create new ones.
  var parent = $(this);
  var previousElement = parent;
  parent.children(".split-here").each(function() {
   // Find all children where we want to split and loop over them.
    var newElement = $("<" + elementType + ">"); // $("<div>") is short for $("<div></div>"). It creates a new "complete" element, not just it's "top", because that's not possible.
    var child = $(this);
    var childrenToMove = child.add(child.nextUntil('.split-here')); // Take the current child, and all it's following siblings until the next split location
    newElement.append(childrenToMove); // Insert them into the new element
    previousElement.after(newElement); // Insert the new element after the previous one
    previousElement = newElement;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="split-me">
  <li>The</li>
  <li>content</li>
  <li>doesn't</li>
  <li>matter.</li>
  <li class="split-here">This</li>
  <li>is</li>
  <li>just</li>
  <li>an</li>
  <Li>example.</Li>
  <li class="split-here">The</li>
  <li>end.</li>
</ul>

https://jsfiddle.net/smLtrx72/

将一组无序列表拆成div，在若干个li项后用jquery

Split a group of unordered list into divs with jquery after a number of li items

jquery

html-lists