我正在调用以下 API/Json 对象，并尝试在三个单独的列中显示每个值三次。我得到了所有三列，但在每一列中，我得到的结果都比我真正想要的要多得多。
示例：Col 1 显示所有 9 个结果 Col 2 显示 6 个结果，Col 3 显示 3 个结果
$( document ).ready(function() {
var api_url = 'private_API Here';
$.ajax({
type: 'GET',
url: api_url ,
dataType: 'json',
success: function(result){
for (const prop in result.rates) {
$(".row").append("<div class='column'>");
for(i = 0; i < 3; i++){
let para = document.createElement("p");
para.innerHTML = `${result.rates[prop].toFixed(3)} ${prop} `;
}
$( ".column" ).append( para );
// document.getElementById("content").appendChild(para);
// console.log(`Country: ${prop}, currency rate: ${result.rates[prop].toFixed(2)}`);
$(".row").append("</div>");
}
}
})
});
这是我正在调用的 API/对象。
{
"rates": {
"EEE": 0.9061254078,
"RRR": 9.8219463574,
"GGG": 0.8206324755
}
}
这是 HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>API CAll</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="app.js"></script>
</head>
<style>
* {
box-sizing: border-box;
}
div p{
width: 100px;
border: 1px solid green;
padding: 20px;
margin: 20px;
}
.row {
display: flex;
}
.column {
flex: 50%;
padding: 10px;
height: 300px; /* Should be removed. Only for demonstration */
}
</style>
<body>
<div id="content" class="row">
</div>
</body>
</html>
如果我缺少任何细节，请告诉我。
<div class='column'>元素添加到文档中。 然后，每次通过外部循环时，您都会运行与刚刚添加的列以及之前添加的所有列匹配的$( ".column" ).append( para );。
相反，创建<div>并存储其 jQuery 对象，然后向其添加元素。
para也有一些可疑的事情;你用let声明它，然后在它声明的块之外使用它。你不能用let做到这一点. (在$( ".column" ).append( para );中，para变量应该未定义，因为它已经超出了范围。
此外，您只附加此元素的最新版本。
基于上述两个观察结果，我推测您观察到的行为来自与你向我们展示的代码不同的代码迭代。
无论如何，这是带有注释的固定代码，显示更改的内容：
// Create the column and store its jQuery object to use later.
let column = $("<div class='column'></div>");
// TODO: Should you match .row here, or use a specific row?
$(".row").append(column);
for (i = 0; i < 3; i++) {
// Use jQuery to create the P element instead of the DOM.
let para = $('<p></p>');
// Use the jQuery text() method to set the content. (Prevents element
// injection by server via innerHTML.)
para.text(`${result.rates[prop].toFixed(3)} ${prop} `);
// Append this element only to the one div we created this iteration of the
// outer loop.
column.append(para);
}
我还删除了$(".row").append("</div>");- "部分元素"不能存在于 DOM 中，因此在创建元素后添加结束标签是无稽之谈。