Question

我有一个无序列表，如下所示吐出（类名允许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 list-items需要嵌套在“parent”level-01中。（level-01 list-items包含一个复选框，如果检查将显示它的嵌套选项）

基本上我需要一个脚本，在最近的level-02内添加每个level-01'li-item'。但我似乎无法弄清楚如何解决这个问题。

Answer 1

循环浏览li并将2附加到1 s - 请参阅下面的演示：

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>

一个更简单的解决方案，可找到最近的 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>

Answer 2

您可以使用jquery中的prev()方法将其附加到之前的.level-01

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

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

2 个答案: