Question

我需要通过插入分隔符

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

</div><div>

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

新div将包含不同数量的行，因为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

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

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

就像在阅读生活中一样，盒子的顶部或盒子的底部单独没有意义，你不能通过在中间插入一个新的“底部”和“顶部”将盒子分成两部分的盒子。

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

总结：您需要创建新的div，而不是分割div，并将原始div中的元素转移到新的div中，并附加新div在旧的之后。

Intermezzo：首先我们需要确保您使用的是正确的HTML。您的示例ul包含多个li元素，但每个元素仅包含一个ul。但是，在您的示例HTML中，您在li元素之间进行了分配，但在JavaScript中，您尝试在div个元素之间进行分割。

所以你必须选择一个：

ul填充ul并在ul或
li填充li并在$(".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; }); }); s

在任何情况下，以下代码都可以在两种情况下独立工作。

另一个不明确的事情是：你想要分裂到哪里？您的示例HTML似乎没有任何迹象表明您想要吐出列表。在这种情况下，我将使用一个类来标记拆分的位置。如果你需要别的东西，你需要更好地解释它。

回到问题：

<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>

class Foo
  attr_accessor :one, :two, :three, :four
  attr_accessor :five, :six, :seven, :eight

  def initialize(p={})
    @one = p[:one] if p[:one].present?
    # ...
    @eight = p[:eight] if p[:eight].present?
  end
end

https://jsfiddle.net/smLtrx72/

在一些li项之后用jquery将一组无序列表拆分为div

1 个答案: