基于类名对列表项进行分组和嵌套答案

【问题标题】：Grouping listitems and nesting based on classnames基于类名对列表项进行分组和嵌套
【发布时间】：2018-01-16 06:38:29
【问题描述】：

我有一个如下所示的无序列表（类名允许 CSS 样式）：

<ul>
      <li class="level-01"> </li>
      <li class="level-01"> </li>
      <li class="level-01"> </li>
      <li class="level-02"> </li>
      <li class="level-02"> </li>
      <li class="level-02"> </li>
      <li class="level-02"> </li>
      <li class="level-01"> </li>
      <li class="level-02"> </li>
      <li class="level-02"> </li>
      <li class="level-02"> </li>
      <li class="level-01"> </li>
      <li class="level-02"> </li>
      <li class="level-01"> </li>
      <li class="level-01"> </li>
      <li class="level-02"> </li>
      <li class="level-02"> </li>
      <li class="level-02"> </li>
      <li class="level-02"> </li>
      <li class="level-01"> </li>
      <li class="level-02"> </li>
      <li class="level-02"> </li>
      <li class="level-02"> </li>
      <li class="level-02"> </li>
      <li class="level-02"> </li>
      <li class="level-01"> </li>
      <li class="level-02"> </li>
      <li class="level-02"> </li>
      <li class="level-01"> </li>
      <li class="level-02"> </li>
      <li class="level-02"> </li>
      <li class="level-02"> </li>
      <li class="level-02"> </li>
      <li class="level-01"> </li>
      <li class="level-01"> </li>
      <li class="level-01"> </li>
      <li class="level-01"> </li>
      <li class="level-01"> </li>
      <li class="level-01"> </li>
      <li class="level-02"> </li>
      <li class="level-02"> </li>
      <li class="level-02"> </li>
      <li class="level-02"> </li>
      <li class="level-02"> </li>
      <li class="level-02"> </li>
      <li class="level-01"> </li>
      <li class="level-01"> </li>
    </ul>

我被要求更改其工作方式 - level-02 列表项需要嵌套在“父”level-01 中。（level-01 列表项包含一个复选框，如果检查将显示它的嵌套选项）

基本上我需要一个脚本，在最近的level-01 中添加每个level-02 'li-item'。但我似乎无法弄清楚如何去做。

【问题讨论】：

哪些level-02 项目应该在哪些level-01 项目下？

标签： javascript jquery html list dom

【解决方案1】：

你可以使用 jquery 中的prev() 方法将它附加到之前的.level-01 像这样

$('.level-02').each(function(){
    var nearest = $(this).prev('.level-01');
  nearest.append($(this));
})

【讨论】：

我没有对此进行测试，但我相信您的回答确实会将 level-02 插入到“previous” level-01 中。我上班后会及时通知你。

【解决方案2】：

遍历lis 并将2s 附加到1s - 请参见下面的演示：

var list = $('<ul/>'), prev, parent;

$('ul li').each(function(){
  // add to list if level 1
  if($(this).hasClass('level-01')) {
    list.append(this);
    // save the current level 1
    prev = $(this);
    parent = null;
  } else {
    // create a sub-list ul
    if(!parent) {
       prev.append($('<ul/>'));
       parent = prev.find('ul');
    }
    // append to the sub-list
    parent.append($(this));
  }
});

$('body').append(list);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="level-01"> 1</li>
  <li class="level-01"> 1</li>
  <li class="level-01"> 1</li>
  <li class="level-02"> 2</li>
  <li class="level-02"> 2</li>
  <li class="level-02"> 2</li>
  <li class="level-02"> 2</li>
  <li class="level-01"> 1</li>
  <li class="level-02"> 2</li>
  <li class="level-02"> 2</li>
  <li class="level-02"> 2</li>
  <li class="level-01"> 1</li>
  <li class="level-02"> 2</li>
  <li class="level-01"> 1</li>
  <li class="level-01"> 1</li>
  <li class="level-02"> 2</li>
  <li class="level-02"> 2</li>
  <li class="level-02"> 2</li>
  <li class="level-02"> 2</li>
  <li class="level-01"> 1</li>
  <li class="level-02"> 2</li>
  <li class="level-02"> 2</li>
  <li class="level-02"> 2</li>
  <li class="level-02"> 2</li>
  <li class="level-02"> 2</li>
  <li class="level-01"> 1</li>
  <li class="level-02"> 2</li>
  <li class="level-02"> 2</li>
  <li class="level-01"> 1</li>
  <li class="level-02"> 2</li>
  <li class="level-02"> 2</li>
  <li class="level-02"> 2</li>
  <li class="level-02"> 2</li>
  <li class="level-01"> 1</li>
  <li class="level-01"> 1</li>
  <li class="level-01"> 1</li>
  <li class="level-01"> 1</li>
  <li class="level-01"> 1</li>
  <li class="level-01"> 1</li>
  <li class="level-02"> 2</li>
  <li class="level-02"> 2</li>
  <li class="level-02"> 2</li>
  <li class="level-02"> 2</li>
  <li class="level-02"> 2</li>
  <li class="level-02"> 2</li>
  <li class="level-01"> 1</li>
  <li class="level-01"> 1</li>
</ul>

找到最近的level 1元素的更简单的解决方案：

$('.level-02').each(function(){
  var parent = $(this).prev('.level-01');
  if(!parent.find('ul').length)
    parent.append($('<ul/>'));
  parent.find('ul').append(this);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="level-01"> 1</li>
  <li class="level-01"> 1</li>
  <li class="level-01"> 1</li>
  <li class="level-02"> 2</li>
  <li class="level-02"> 2</li>
  <li class="level-02"> 2</li>
  <li class="level-02"> 2</li>
  <li class="level-01"> 1</li>
  <li class="level-02"> 2</li>
  <li class="level-02"> 2</li>
  <li class="level-02"> 2</li>
  <li class="level-01"> 1</li>
  <li class="level-02"> 2</li>
  <li class="level-01"> 1</li>
  <li class="level-01"> 1</li>
  <li class="level-02"> 2</li>
  <li class="level-02"> 2</li>
  <li class="level-02"> 2</li>
  <li class="level-02"> 2</li>
  <li class="level-01"> 1</li>
  <li class="level-02"> 2</li>
  <li class="level-02"> 2</li>
  <li class="level-02"> 2</li>
  <li class="level-02"> 2</li>
  <li class="level-02"> 2</li>
  <li class="level-01"> 1</li>
  <li class="level-02"> 2</li>
  <li class="level-02"> 2</li>
  <li class="level-01"> 1</li>
  <li class="level-02"> 2</li>
  <li class="level-02"> 2</li>
  <li class="level-02"> 2</li>
  <li class="level-02"> 2</li>
  <li class="level-01"> 1</li>
  <li class="level-01"> 1</li>
  <li class="level-01"> 1</li>
  <li class="level-01"> 1</li>
  <li class="level-01"> 1</li>
  <li class="level-01"> 1</li>
  <li class="level-02"> 2</li>
  <li class="level-02"> 2</li>
  <li class="level-02"> 2</li>
  <li class="level-02"> 2</li>
  <li class="level-02"> 2</li>
  <li class="level-02"> 2</li>
  <li class="level-01"> 1</li>
  <li class="level-01"> 1</li>
</ul>

【讨论】：