javascript - 在 JQuery 中的动态数组中创建动态数组

Question

我有一个像下面这样的表格，其中包含步骤，每个步骤包含多门类(class)。

<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>

当我点击“添加步骤”和“添加类(class)”按钮时，如何正确地附加这些？

我需要以这种格式添加它们

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

Answer 1

您可以使用 querySelectorAll 提取所有步骤。然后，遍历此集合中的所有步骤并使用 querySelector 收集名称、ID 和类(class)。

Array.prototype.map 将使迭代更容易。

var stepElements = document.querySelectorAll('.si-steps');

var result = [].map.call(stepElements, function(stepElement) {
  var courseElements = stepElement.querySelectorAll('.si-courses');
  
  var coursesInfo = [].map.call(courseElements, function(courseElement) {
    return {
      'course-name': courseElement.querySelector("[name='course-name']").value,
      'course-id': courseElement.querySelector("[name='course-id']").value
    };
  });
  
  return {
    'step-name': stepElement.querySelector("[name='step-name']").value,
    'step-id': stepElement.querySelector("[name='step-id']").value,
    'course': coursesInfo
  };
});
  
document.getElementById('result').innerText = JSON.stringify(result, null, 4);

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

<div class="si-steps">
  <input type="text" class="si-step-input" name="step-name" value="step2">
  <input type="text" class="si-step-input" name="step-id" value="2">
  <div class="si-courses">
    <input type="text" class="si-step-input" name="course-name" value="course3">
    <input type="text" class="si-step-input" name="course-id" id="c3">
  </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>

<div>
  <pre id="result">
  </pre>
</div>

请注意，添加类(class) 和添加步骤 按钮未实现。向下滚动代码段以查看结果。