Add CSS class while iterating through a loop, JQuery

Question

I have a jquery loop that is creating a few titles with a few buttons under each title. I need to add styling to the titles and to the buttons. Right now they are being created in the loop as html elements. How would I go about adding a CSS class while looping instead of creating these new html elements such as <h3> and <button>? Here is a screenshot of what I am aiming to accomplish. Right now I just have titles with buttons unstyled displaying underneath it, 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
        })
        ))
    })

Ibra · Accepted Answer · 2019-03-18T01:52:50.850

1

You can add Class like this :

//..
$('#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>

edited Mar 18 '19 at 01:52

answered Mar 18 '19 at 00:39

Ibra

906
1
7
13

Css is looking much better now! Although my titles are appearing side by side with the buttons instead of as a title on top of the buttons. Here is a screenshot. https://gyazo.com/e3c212cd86343ebf0b5ae4950636b092. Also how would i get those images as in the first screenshot to appear on the buttons? The images have the same name as the text which appears on the button, just it has an .svg extension. I need to do something like this just not sure how to blend it in to this code. image.clone().attr("src", `/wwwroot/images/${item.name}.svg`); Thank you so much!! – R.P. Mar 18 '19 at 00:57
@R.P. I edited the answer. Please check it again :) – Ibra Mar 18 '19 at 01:53
AMAZING! Thank you! worked just as i wanted with adding the images. Still wondering how I can get the 'k' value to display as a title on top of the 'v' buttons? Its displaying wrapping the values around the rows... – R.P. Mar 18 '19 at 03:46
@R.P. Have you tried to run code snippet? I think it works as well as you want : http://cfile28.uf.tistory.com/image/99BE3E415C8F22E80A593C – Ibra Mar 18 '19 at 04:48
Ok thank you! How would i go about using a default image in the cases where the code can't find an image since there's no image with the button name in the images folder? – R.P. Mar 19 '19 at 02:25
@R.P. Check here : https://stackoverflow.com/questions/92720/jquery-javascript-to-replace-broken-images – Ibra Mar 19 '19 at 02:44
Thank you! that comment was helpful! – R.P. Mar 19 '19 at 18:00
I am using your approach in my code. I would like when the button is clicked to set the background color of the button. When i do something like this it doesn't work. $(` – R.P. Apr 08 '19 at 00:56

Add CSS class while iterating through a loop, JQuery

1 Answers1