将列表拆分为两列.列表没有't具有块，但是需要在最接近的<p>标签

Split list into two columns. List doesn't have blocks but need to split on closest <p> tag

本文关键字：列表 最接近 gt 标签 lt 拆分 两列      更新时间：2024-06-29

我想把下面的列表分成两列，但只在最近的<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

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

以下代码的作用：首先，插入第二个<div>。接下来，检索所有<p>元素，并将最后一项存储在last变量中。while循环一次获取一个所有同级（<span>元素），并将它们移动到第二个<div>。最后，最后一个<p>也被作为第一个子移动到那里。

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>的位置，请参阅第二个演示来实现这一点。

我知道你在要求Jquery解决方案，但根据你的说法，你在使用bootstrap？如果是这样的话，就不能用html中的div来包装每个组吗？

    <div class="col-sm-6">
      <p class="letter-header" id="A">A</p>
      <span>Aaasdfasdf</span>
      <span>Asdfasdf</span>
      <span>Aba</span>
      <span>Accc</span>
      <span>Azzd</span>
    </div>
相关文章：