Question

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

HTML HTML代码：

 <ul class="sub-menu insert">

我正在使用的ul类是＆＃34;插入＆＃34;

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文件，目的是创建一个列表，其中包含与上述文件中一样多的行。列表中的每一行都必须遵循某种语法。并且必须为每一行生成唯一的div id。该列表与ul class＆＃34; insert＆＃34;在HTML代码中。

我希望生成的列表在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函数

第二个功能连接唯一的＆＃34; test_id＆＃34;在第一个函数中生成。它从JSON文件中收集数据。它有效，但只有当有一个＆＃34; div id＆＃34;时。它必须能够区分不同的唯一＆＃34; div id：s＆＃34;这是由第一个函数生成的。

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

Answer 2

我从Gaurav那里得到了很多有价值的帮助来解决这个问题。在我对代码进行了一些工作之后，我找到了一种方法来删除＆＃34; test_id＆＃34;，而不是将第二个函数中的代码直接添加到生成新列表元素的循环中。

$(function() {
 $.ajax({
     type: 'GET',
     url: 'json/data.json',
     async: false,
     beforeSend: function() {

     },
     dataType: 'json',
     success: function(result) {

         $(document).ready(function() {

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

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

如何动态创建每行必须具有特定格式的列表？

JavaScript代码有两个功能：

2 个答案: