javascript - 如何动态创建一个列表，其中每一行都必须具有特定格式？

Question

我需要用 JavaScript 动态创建一个列表，每行都有一个唯一的 div id。我该怎么做呢？

HTMLHTML 代码:

 <ul class="sub-menu insert">

我正在使用的 ul 类是“插入”

JavaScript 代码有两个功能:

第一个 JavaScript 函数

$(function() {
   $.ajax({
       type: 'GET',
       url: 'json/data.json',
       async: false,
       beforeSend: function() {
       },
       dataType: 'json',
       success: function(result) {
          $(document).ready(function() {
          var divsToAppend = "";
          $.each(result, function(i) { //Item key
             $("#insert").append += '<li id="' + i + '">"<a href="#"><div id="test_ID"' + i +'></div></a>" + '</li>');
          });
       });
   }
});

代码片段:这是一个字符串:

    "<a href="#"><div id="test_ID" + i +></div></a>"

第一个函数循环遍历 JSON 文件，目的是创建一个列表，其中的行数与所提到的文件中的行数一样多。列表中的每一行都必须遵循特定的语法。并且 tt 必须为每一行生成一个唯一的 div id。该列表与 HTML 代码中的 ul 类“insert”连接。

我希望生成的列表在 HTML 中看起来像这样:

<li><a href="#"><div id="test_ID1"></div></a></li> 
<li><a href="#"><div id="test_ID2"></div></a></li> 

我提到的唯一 div id:

"test_IDi"

第二个 JavaScript 函数

第二个函数连接第一个函数中生成的唯一“test_id”。它从 JSON 文件中收集数据。它有效，但只有当有一个“div id”时。它必须能够区分第一个函数生成的不同的唯一“div id:s”。

$(function () {
    $.ajax({
        type: 'GET',
        url: 'json/data.json',
        async: false,
        beforeSend: function () {/*loading*/
        },
        dataType: 'json',
        success: function (result) {
            $("#test_IDi").empty(); //Empty ID 

        $.each(result, function(i, v) {

            $("#test_IDi").append('<li id="' + v.id + '">' + v.test + '  ' + v.testDate + '</li>');
        });
        }
    });
});
});

JSON 文件(包含以供引用):

 [
   {"id": "a", "test": "Java", "testDate": "17-08-01"},
   {"id": "b","test":"JavaScript","testDate": "17-08-02"}
 ]

我多么希望完成的列表看起来像这样:

Java 17-08-01

JavaScript 17-08-02

Answer 1

给你。

看下面的例子:

var result = [{
  data: ''
}, {
  data: ''
}];

var jsonData = [{
  "id": "a",
  "test": "Java",
  "testDate": "17-08-01"
}, {
  "id": "b",
  "test": "JavaScript",
  "testDate": "17-08-02"
}];

$.each(result, function(index) {

  $(".insert").append('<li><a href="#"><div id="test_ID' + index + '"></div></a></li>');
});

$.each(jsonData, function(index, value) {

  $("#test_ID" + index).append('<li id="' + value.id + '">' + value.test + '  ' + value.testDate + '</li>');
});

$('#output-html').val($('#html-data').html());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="html-data">
  <ul class="sub-menu insert">
  </ul>
</div>

<div>
  Output HTML:
  <textarea id="output-html" rows="10" cols="55"></textarea>
</div>