Question

我有一个包含多个属性的php脚本中的项目列表，例如，将一个项目确定为其他项目的父项。

所以我可以这样写下这个列表：

<nav>
  <ul>
    <li id="1" parent_id="0" c_order="1">Title 1</li>
    <li id="2" parent_id="0" c_order="2">Title 2</li>
    <li id="3" parent_id="0" c_order="3">Title 3</li>
    <li id="4" parent_id="2" c_order="1">Title 2.1</li>
    <li id="5" parent_id="2" c_order="2">Title 2.2</li>
    <li id="6" parent_id="1" c_order="2">Title 1.2</li>
    <li id="7" parent_id="1" c_order="1">title 1.1</li>
    <li id="8" parent_id="4" c_order="1">title 2.1.1</li>
    <li id="9" parent_id="4" c_order="2">title 2.1.2</li>
  </ul>
</nav>

我希望jQuery像这样重新排序列表，但我确实太糟糕了:)

<nav>
  <ul>
    <li id="1" parent_id="0" c_order="1" class="has-sub">
      Title 1
      <ul>
        <li id="7" parent_id="1" c_order="1">Title 1.1</li>
        <li id="6" parent_id="1" c_order="2">Title 1.2</li>
      </ul>
    </li>
    <li id="2" parent_id="0" c_order="2" class="has-sub">
      Title 2
      <ul>
        <li id="4" parent_id="2" c_order="1" class="has-sub">
          Title 2.1
            <ul>
              <li id="8" parent_id="4" c_order="1">title 2.1.1</li>
              <li id="9" parent_id="4" c_order="2">title 2.1.2</li>
            </ul>
        </li>
        <li id="5" parent_id="2" c_order="2">Title 2.2</li>
      </ul>
    </li>
    <li id="3" parent_id="0" c_order="3">
      Title 3
    </li>
  </ul>
</nav>

编辑：子列表的深度可以是无限的，我必须至少使用jQuery 3 +

Answer 1

请参阅以下演示中的评论：

// Create child and append to nav, then remove the original ul
$('nav').append(CreatChild(0)).find('ul:first').remove()

// iterate all the possible parent node to find its childs and append to itself after sorting
// when all child are found, wrap with ul and return
function CreatChild(id){
    var $li = $('li[parent_id=' + id + ']').sort((a, b)=>Sort(a, b));
    if($li.length>0){
        for(var i=0;i<$li.length;i++){
            var $this = $li.eq(i);
            $this.append(CreatChild($this.attr('id')))
        }
        return $('<ul>').append($li);
    }
}

function Sort(a, b){
  return $(a).attr('c_order') - $(b).attr('c_order')
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
  <ul>
    <li id="1" parent_id="0" c_order="1">Title 1</li>
    <li id="2" parent_id="0" c_order="2">Title 2</li>
    <li id="3" parent_id="0" c_order="3">Title 3</li>
    <li id="4" parent_id="2" c_order="1">Title 2.1</li>
    <li id="5" parent_id="2" c_order="2">Title 2.2</li>
    <li id="6" parent_id="1" c_order="2">Title 1.2</li>
    <li id="7" parent_id="1" c_order="1">title 1.1</li>
    <li id="8" parent_id="4" c_order="1">title 2.1.1</li>
    <li id="9" parent_id="4" c_order="1">title 2.1.2</li>
  </ul>
</nav>

如何将项目列表重新排序到具有数据属性和jQuery

1 个答案: