从HTML元素结构创建嵌套的JSON对象

Question

我正在工作流配置屏幕上，并且在HTML级别上具有以下结构：

<ul class="wfSteps">
 <li>
  <ul>
     <li><input type="text" value="a"></li>
  </ul>
  <ul class="sequential">
     <li><input type="text" class="stepName" value="seq of a"> 
     </li>
     <li>
        <ul class="parallel">
           <li><input type="text" class="stepName" value="par of a2"></li>
        </ul>
     </li>
  </ul>
  <ul class="parallel">
     <li><input type="text" class="stepName" value="par of a"></li>
  </ul>
 </li>
</ul>

现在我想以以下格式导出JSON对象：

{    "stepBracket": [
  {
    "combinationType": "Sequential",
    "stepList": [
      {
        "stepName": "<stepName>",
        "stepBracket": {
          "combinationType": "parallel",
          "stepList": [
            {
              "stepName": "<stepName>"
             }
          ]
        }
      },
      {
        "stepName": "<stepName>"
      }
    ]
  },
  {
    "combinationType": "parallel",
    "stepList": [
      {
        "stepName": "<stepName>"
      }
    ]
  }
]
}

我尝试了Jquery map方法，但陷入了嵌套级别。任何建议我如何实现所需的Json对象数据。

function build($query) {
  return {
    stepBracket: $.map($query.find('ul'), function (item) { 
      var f = {
            stepName: "abc",
            sequential: [],
            parallel: []
         };
      return f;  
      })
  };
}

var result = build($(".wfSteps:first"));