Javascript 在JQuery中的动态数组中创建动态数组

我有一个像下面这样的表单，它包含步骤，每个步骤包含多个课程

<div class="si-steps">
  <input type="text" class="si-step-input" name="step-name">
  <input type="text" class="si-step-input" name="step-id">
  <div class="si-courses">
    <input type="text" class="si-step-input" name="course-name">
    <input type="text" class="si-step-input" name="course-id">
  </div>
  <button type="button" id="si-course-btn" class="si-course-btn">Add course</button>
</div>
<button type="button" id="si-step-btn" class="si-step-btn">Add step</button>

---

您可以使用

querySelectorAll

提取所有步骤。然后，迭代此集合中的所有步骤，并使用

querySelector

收集名称、id和课程

Array.prototype.map

将简化迭代

var-stepElements=document.querySelectorAll（'.si-steps'）；
var result=[].map.call（步骤元素，函数（步骤元素）{
var courseElements=stepElement.querySelectorAll（'.si courses'）；
var courseInfo=[].map.call（courseElement，函数（courseElement））{
返回{
“课程名称”：courseElement.querySelector（“[name='course-name']”）。值，
“课程id”：courseElement.querySelector（“[name='course-id']”）。值
};
});
返回{
“步骤名称”：stepElement.querySelector（“[name='step-name']”）。值，
“步骤id”：stepElement.querySelector（“[name='step-id']”）。值，
“课程”：课程信息
};
});
document.getElementById（'result'）.innerText=JSON.stringify（result，null，4）

添加课程
添加课程
添加步骤

targetCourse: [{
  step-name: 
  step-id:
  course: [{
    course-name:
    course-id:
  }]
}]