我需要用 JavaScript 动态创建一个列表,每行都有一个唯一的 div id。我该怎么做呢?
HTML HTML 代码:
<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
最佳答案
给你。
看下面的例子:
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>
关于javascript - 如何动态创建一个列表,其中每一行都必须具有特定格式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42554115/