javascript - 将列表拆分为两列。列表没有 block ，但需要在最近的 <p> 标签上拆分

Question

我想将如下所示的列表分成两列，但只在最接近的 <p> 之前拆分标签。我不能使用 css3，因为你只能告诉它不要在元素内中断。我没有元素来定义它。注意:我无法将 html 添加到此列表。

https://jsfiddle.net/j9b3wuuw/

<p>A</p>
<span>Asdf</span>
<span>Axxxx</span>
<p>B</p>
<span>Basdf</span>
<span>Basdf</span>
<span>Basdf</span>
<span>Basdf</span>
<span>Basdf</span>
<p>C</p>
<span>Casdf</span>
<span>Casdf</span>
<span>Casdf</span>

预期结果

A        C
Asdf    Casdf
Axxxx   Casdf
B       Casdf
Basdf
Basdf
Basdf
Basdf
Basdf

Answer 1

我没有使用 jQuery，而是使用普通的 javascript。使用 jQuery 可能有更短的方法。

下面的代码做了什么:第一，第二 <div>被插入。接下来，所有<p>检索元素并将最后一项存储在 last 中多变的。 while 循环一次获取所有兄弟(<span> 元素)并将它们移动到第二个 <div>。 .最后，最后<p>也作为第一个 child 搬到那里。

document.body.innerHTML += '<div id="second"></div>';
var div2 = document.getElementById("second");
var list = document.getElementsByTagName("P");
var last = list[list.length - 1];
while (sib = last.nextSibling) {
  div2.appendChild(sib);
}
div2.insertBefore(last, div2.childNodes[0]);

span {
  display: block;
}
div {
  display: inline-block;
  vertical-align: top;
}

<div class="col-sm-12 options">
  <p class="letter-header" id="A">A</p>
  <span>Aaasdfasdf</span>
  <span>Asdfasdf</span>
  <span>Aba</span>
  <span>Accc</span>
  <span>Azzd</span>
  <p class="letter-header" id="B">B</p>
  <span>Baasdfasdf</span>
  <span>Bsdfasdf</span>
  <span>Bba</span>
  <span>Bccc</span>
  <span>Bzzd</span>
  <p class="letter-header" id="F">F</p>
  <span>Faasdfasdf</span>
  <span>Fsdfasdf</span>
  <span>Fba</span>
  <span>Fccc</span>
  <span>Fzzd</span>
  <span>Fba</span>
  <span>Fccc</span>
  <span>Fzzd</span>
  <span>Fba</span>
  <span>Fccc</span>
  <span>Fzzd</span>
  <p class="letter-header" id="W">W</p>
  <span>Waasdfasdf</span>
  <span>Wsdfasdf</span>
  <span>Wba</span>
  <span>Wccc</span>
  <span>Wzzd</span>
  <p class="letter-header" id="Z">Z</p>
  <span>Zaasdfasdf</span>
  <span>Zsdfasdf</span>
  <span>Zba</span>
  <span>Zccc</span>
  <span>Zzzd</span>
</div>

DEMO (Fiddle)只是拆分最后一部分。

要将列表分成两个大小差不多的列表，<p> 的位置需要首先找到最接近但在完整列表中间之后的位置，请参阅 second demo实现这一目标。