Jquery - 按数据属性对列表进行分组和排列

Question

我从Google电子表格中提取一些json数据并使用以下内容显示它：

 $(entry).each(function(){
// Column names are section, subcat, heading,description
$('.results ul').prepend('<li data-section="'+this.gsx$section.$t+'" class="'+this.gsx$subcat.$t+'"><span>'+this.gsx$subcat.$t+'</span><h2>'+this.gsx$heading.$t+'</h2><p>'+this.gsx$description.$t+'</p></li>');});

html输出是这样的：

Category1

访问服务

描述在这里

Category2

社区支持

描述在这里

Category3

家庭责任

描述在这里

Category4

免费资源

描述在这里

我想要做的是按照数据属性分组li - section。

输出如下：

       <ul>
<li>
  <h1>Section 1</h1>

  <ul>
    <li data-section="Section 1" class="Category1">
      <span>Category1</span>

      <h2>Access Services</h2>

      <p>description goes here</p>
    </li>
  </ul>
</li>

<li>
  <h1>Section 2</h1>

  <ul>
    <li data-section="Section 2" class="Category2">
      <span>Category2</span>

      <h2>Community supports</h2>

      <p>description goes here</p>
    </li>

    <li data-section="Section 2" class="Category3">
      <span>Category3</span>

      <h2>Family responsibility</h2>

      <p>description goes here</p>
    </li>
  </ul>
</li>

<li data-section="Section 3">
  <h1>Section 3</h1>

  <ul>
    <li data-section="Section 3" class="Category4">
      <span>Category4</span>

      <h2>Free resources</h2>

      <p>description goes here</p>
    </li>
  </ul>
</li>

Img of above html output 我在Stack上找到的大多数解决方案更多的是关于＆＃39;排序＆＃39;没有＆＃39;分组和排序＆＃39;。任何指导都表示赞赏。

我尝试过以下但不太合适：

     $('.results li').each(function(){
$('.results li[data-section="'+this.gsx$section.$t+'"]').insertAfter($(this)).wrapAll('<ul />');

}）;