我使用 jQuery 练习 Ajax。
我现在正在研究如何使用 jQuery for 循环输出 json 数据。如何输出标签,甚至将标签包装在 for 循环内?
HTML 标签如下所示:
<main>
<h1>Ajax</h1>
<div id="output">
<h2>Title</h2>
<h2>Title</h2>
<div class="block"></div>
<div class="wrap">
<div class="card"></div>
<h3>Card Title</h3>
<p><img src="https://picsum.photos/200/100" alt="Alt"></p>
<p>Text</p>
<h3>Card Title</h3>
<p><img src="https://picsum.photos/200/100" alt="Alt"></p>
<p>Text</p>
<h3>Card Title</h3>
<p><img src="https://picsum.photos/200/100" alt="Alt"></p>
<p>Text</p>
</div>
<div class="block"></div>
<div class="wrap">
<div class="card"></div>
<h3>Card Title</h3>
<p><img src="https://picsum.photos/200/100" alt="Alt"></p>
<p>Text</p>
<h3>Card Title</h3>
<p><img src="https://picsum.photos/200/100" alt="Alt"></p>
<p>Text</p>
<h3>Card Title</h3>
<p><img src="https://picsum.photos/200/100" alt="Alt"></p>
<p>Text</p>
</div>
</div><!-- /#output -->
</main>
但我想包装 block
、card
div 标签以在其中包含 h3
.etc 标签。
理想情况下,我希望 html 是这样的:
<main>
<h1>Ajax</h1>
<div id="output">
<div class="block">
<h2>Title</h2>
<div class="wrap">
<div class="card">
<h3>Card Title</h3>
<p><img src="https://picsum.photos/200/100" alt="Alt"></p>
<p>Text</p>
</div>
<div class="card">
<h3>Card Title</h3>
<p><img src="https://picsum.photos/200/100" alt="Alt"></p>
<p>Text</p>
</div>
<div class="card">
<h3>Card Title</h3>
<p><img src="https://picsum.photos/200/100" alt="Alt"></p>
<p>Text</p>
</div>
</div>
</div>
<div class="block">
<h2>Title</h2>
<div class="wrap">
<div class="card">
<h3>Card Title</h3>
<p><img src="https://picsum.photos/200/100" alt="Alt"></p>
<p>Text</p>
</div>
<div class="card">
<h3>Card Title</h3>
<p><img src="https://picsum.photos/200/100" alt="Alt"></p>
<p>Text</p>
</div>
<div class="card">
<h3>Card Title</h3>
<p><img src="https://picsum.photos/200/100" alt="Alt"></p>
<p>Text</p>
</div>
</div>
</div>
</div><!-- /#output -->
</main>
请帮忙。 预先感谢您。
// $.getJSON("data.json", function(data) {
var data = [{
"title": "Title",
"content": [
{ "card": "Card Title", "text": "Text", "img": "https://picsum.photos/200/100", "alt": "Alt" },
{ "card": "Card Title", "text": "Text", "img": "https://picsum.photos/200/100", "alt": "Alt" },
{ "card": "Card Title", "text": "Text", "img": "https://picsum.photos/200/100", "alt": "Alt" }
]
},
{
"title": "Title",
"content": [
{ "card": "Card Title", "text": "Text", "img": "https://picsum.photos/200/100", "alt": "Alt" },
{ "card": "Card Title", "text": "Text", "img": "https://picsum.photos/200/100", "alt": "Alt" },
{ "card": "Card Title", "text": "Text", "img": "https://picsum.photos/200/100", "alt": "Alt" }
]
}];
for (var i in data) {
const output = $('#output');
const block = $('<div class="block"></div>');
const wrap = $('<div class="wrap"></div>');
const card = $(wrap).append('<div class="card"></div>');
$(output).append(block).prepend('<h2>' + data[i].title + '</h2>').append(wrap);
for (var j in data[i].content) {
$(card).append('<h3>' + data[i].content[j].card + '</h3>')
.append('<p><img src="' + data[i].content[j].img + '" alt="' + data[i].content[j].alt + '">' + '</p>')
.append('<p>' + data[i].content[j].text + '</p>');
}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#output {
text-align: center;
}
.block {
margin: 50px auto;
}
.wrap {
padding: 20px;
display: flex;
justify-content: space-around;
background-color: #f8f8f8;
}
.card {
padding: 30px 20px;
background-color: lavenderblush;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main>
<h1>Ajax</h1>
<div id="output">
</div>
</main>
最佳答案
只是您的附加顺序存在一些问题。检查更正:
// $.getJSON("data.json", function(data) {
var data = [{
"title": "Title",
"content": [
{ "card": "Card Title", "text": "Text", "img": "https://picsum.photos/200/100", "alt": "Alt" },
{ "card": "Card Title", "text": "Text", "img": "https://picsum.photos/200/100", "alt": "Alt" },
{ "card": "Card Title", "text": "Text", "img": "https://picsum.photos/200/100", "alt": "Alt" }
]
},
{
"title": "Title",
"content": [
{ "card": "Card Title", "text": "Text", "img": "https://picsum.photos/200/100", "alt": "Alt" },
{ "card": "Card Title", "text": "Text", "img": "https://picsum.photos/200/100", "alt": "Alt" },
{ "card": "Card Title", "text": "Text", "img": "https://picsum.photos/200/100", "alt": "Alt" }
]
}];
for (var i in data) {
const output = $('#output')
, block = $('<div class="block"></div>')
, wrap = $('<div class="wrap"></div>')
for (var j in data[i].content) {
const card = $('<div class="card"></div>');
card
.append('<h3>' + data[i].content[j].card + '</h3>')
.append('<p><img src="' + data[i].content[j].img + '" alt="' + data[i].content[j].alt + '">' + '</p>')
.append('<p>' + data[i].content[j].text + '</p>');
wrap.append(card);
}
block.append('<h2>' + data[i].title + '</h2>');
block.append(wrap);
output.append(block);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#output {
text-align: center;
}
.block {
margin: 50px auto;
}
.wrap {
padding: 20px;
display: flex;
justify-content: space-around;
background-color: #f8f8f8;
}
.card {
padding: 30px 20px;
background-color: lavenderblush;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main>
<h1>Ajax</h1>
<div id="output">
</div>
</main>
关于javascript - 如何使用 jquery Ajax 和 json 数据将标签包装在 for 循环内?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60871857/