Question

所以我有一个2个对象，一个包含主管，另一个包含员工数据以及与员工相对应的主管ID（将用于ul id）。我想让它们看起来如下所示，使用JQuery追加：

主管A
- 员工1
- 员工2
主管B
- 员工3
- 员工4

或HTML表单：

<ul id="myEmployee">
   <li> Supervisor A
      <ul id="supervisorA">
          <li id="employee1">Employee 1</li>
          <li id="employee2">Employee 2</li>
      </ul>
   </li>
   <li> Supervisor B
      <ul id="supervisorB">
          <li id="employee3">Employee 3</li>
          <li id="employee4">Employee 4</li>
      </ul>
   </li>
</ul>

最初我只有 <ul id="myEmployee"></ul> 允许JQuery追加元素。

样本数据（根据要求）：

 supervisor = [{
     "SupervisorID": "SupervisorA",
     "DisplayName": "Supervisor A"
 }, {
     "SupervisorID": "SupervisorB",
     "DisplayName": "Supervisor B"
 }];

 employee = [{
     "SupervisorID": "SupervisorA",
     "employeeId": "employee1",
     "DisplayName": "Employee 1"
 }, {
     "SupervisorID": "SupervisorB",
     "employeeId": "employee2",
     "DisplayName": "Employee 2"
 }];

使用for循环，我首先将Supervisors首先附加

for (let x = 0; x < supervisor.length; x++) {
   $('#myEmployee').append('<li>' + supervisor[x].DisplayName + '<ul id=' + supervisor[x].SupervisorID + '></ul></li>');
}

当我尝试将员工附加到包含使用另一个for循环的主管id的ul的

时，问题出现了

for (let x = 0; x < employee.length; x++) {                
   $('#'+employee[x].SupervisorID).append('<li>' + employee[x].employeeID+'</li>');
}

控制台告诉我，JQuery找不到我之前添加的ul的ID。换句话说，jQuery认为ul id没有初始化。

有没有办法解决这个问题？

Answer 1

您必须了解JS数组和对象的工作原理。首先要明白，你会看到出了什么问题。

将第一个循环更改为：

for (let x = 0; x < supervisor.length; x++) {
   $('#myEmployee').append('<li>' + supervisor[x].DisplayName + '<ul id=' + supervisor[x].SupervisorID + '></ul></li>');
}

第二个循环：

for (let x = 0; x < employee.length; x++) {                
   $('#'+employee[x].SupervisorID).append('<li id=' + employee[x].employeeID + '>' + employee[x].DisplayName+'</li>');
}

Answer 2

您提供的示例数据显示了2个对象数组，而不是2个对象。您也没有像@Andreas上面指出的那样正确访问数组索引和对象键。

一旦你更正代码来访问数组，jQuery中的对象应该可以工作。

for (let x = 0; x < supervisor.length; x++) {
    $('#myEmployee').append('<li>' + supervisor[x].DisplayName + '<ul id=' + supervisor[x].SupervisorID + '></ul></li>');
}

for (let x = 0; x < employee.length; x++) {                
   $('#' + employee[x].SupervisorID ).append('<li>' + employee[x].DisplayName + '</li>');
}

工作示例：https://jsfiddle.net/pjpwea/pLu5j3fh/2/

Answer 3

Jsfiddle 您正在以错误的方式访问对象

首先进行循环修复：

 $('#myEmployee').append('<li>' + supervisor[x].DisplayName + '<ul id=' + supervisor[x].SupervisorID + '></ul></li>');

第二个For循环修复：

for (let x = 0; x < employee.length; x++) {                
   $('#'+employee[x].SupervisorID).append('<li>' + employee[x].employeeId+'</li>');
}

jquery在追加

3 个答案: