在循环迭代时添加CSS类，JQuery
在循环迭代时添加CSS类，JQuery
提问于 2019-03-18 08:32:10
我有一个jquery循环，它创建了几个标题，每个标题下有几个按钮。我需要添加样式的标题和按钮。现在，它们在循环中被创建为html元素。如何在循环时添加CSS类，而不是创建这些新的html元素，如<h3>和<button>？这是我的目标截图。现在，我只有一些标题，标题下面显示的是未设置样式的按钮，https://gyazo.com/2ab440e2792fc55dc32cdd39823ff0a9
let response = [{
"name": "Study",
subSection: "Education"
}, {
"name": "Classes",
subSection: "Education"
},
{
name: "Society",
subSection: "Social"
}
];
let res = response.reduce((obj, item) => {
obj[item.subSection] = obj[item.subSection] || [];
obj[item.subSection].push(item.name);
return obj;
}, {});
// get values array and iterate
Object.keys(res).forEach(function(k) {
// generate h3 ith subSection value and append
$('#container').append(
$('<h3>', {
text: k
})
)
// generate buttons and append
.append(res[k].map(v =>
$('<button>', {
text: v
})
))
})回答 1
Stack Overflow用户
回答已采纳
发布于 2019-03-18 08:39:02
您可以像这样添加Class：
//..
$('#container').append(
$('<h3 class="tit_article">' + k + '</h3>')
)
//.. OR
.append(res[k].map(v =>
$(`<button class="btn_del">${v}</button>`)
))
//...
let response = [{
"name": "Study",
subSection: "Education"
}, {
"name": "Classes",
subSection: "Education"
},
{
name: "Society",
subSection: "Social"
}
];
let res = response.reduce((obj, item) => {
obj[item.subSection] = obj[item.subSection] || [];
obj[item.subSection].push(item.name);
return obj;
}, {});
// get values array and iterate
Object.keys(res).forEach(function(k) {
// generate h3 ith subSection value and append
$('#container').append(
$('<h3 class="tit_article">' + k + '</h3>')
)
// generate buttons and append
.append(res[k].map(v =>
$(`<button class="btn_del">
<img src="/wwwroot/images/${v}.svg">
${v}
</button>`)
))
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container"></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55213329
复制相关文章
相似问题