jQuery .css() does not update element

Question

function createList() {
var list = '';
var listID;
$.each(obj_JSON.colors, function(index, value) {
    listID = "clr_" + index;
    list = list + "<div id=" + listID + " alt='" + obj_JSON.colors[index].name + "'></div>"
    clrList.html(list);
    updateListColours(listID);
});

}

function updateListColours(x) {
    $('#' + x).css({"background-color":"rgb(255, 0, 0)", "height":"25px", "width":"25px"});
}

When I watch it get created. The first div gets the style applied to it. Then the second gets created and the style is wiped from the first div and applied to the second and it goes on until the list is complete...

Why is this happening and how can I apply the style to each div? Expecting answer that shows i've done something really stupid as usual

return the updateListColurs(listID)

Bhojendra Rauniyar
– Bhojendra Rauniyar

2014-04-11 09:50:11 +00:00
Commented Apr 11, 2014 at 9:50 — Bhojendra Rauniyar
– Bhojendra Rauniyar, Commented Apr 11, 2014 at 9:50
Ensure that x is the correct id selector value.

Mr. Polywhirl
– Mr. Polywhirl

2014-04-11 09:52:34 +00:00
Commented Apr 11, 2014 at 9:52 — Mr. Polywhirl
– Mr. Polywhirl, Commented Apr 11, 2014 at 9:52

xdazz · Accepted Answer · 2014-04-11 09:52:27Z

3

Because this line clrList.html(list);, you are removing the previous element then add new created.

Instead, do it with:

$.each(obj_JSON.colors, function(index, value) {
    listID = "clr_" + index;
    list = "<div id=" + listID + " alt='" + obj_JSON.colors[index].name + "'></div>"
    clrList.append(list);
    updateListColours(listID);
});

answered Apr 11, 2014 at 9:52

xdazz

161k38 gold badges255 silver badges278 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3387566 Over a year ago

ahhh I see! Thank you! I will run the css apply to all of the list after the creation is completed. Haha I knew it was stupid afterall. Thank you! (will tick when timer goes).

Niet the Dark Absol · Accepted Answer · 2014-04-11 09:52:33Z

0

There's a much easier solution:

function createList() {
    $.each(obj_JSON.colors, function() {
        var d = document.createElement('div');
        d.setAttribute("alt",this.name);
        d.className = "listcolour";
        clrList.appendChild(d);
        // ^ assumes `clrList` is a DOM node, not a jQuery object
    });
}

And CSS:

.listcolour {
    width: 25px;
    height: 25px;
    background-color: #f00;
}

answered Apr 11, 2014 at 9:52

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

2 Comments

user3387566 Over a year ago

I couldn't use this method because the list items will have different colours - they are all red at the moment because I was just trying to get it to work at a more basic level. But thanks for the input!

Niet the Dark Absol Over a year ago

Well, you can use the class for the size, then use d.style.backgroundColor = 'whatever'; as well. The point is, sometimes Vanilla JS is a lot simpler ;)

Collectives™ on Stack Overflow

jQuery .css() does not update element

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related