Change css background color in jquery

Question

I have done an append using the following code, where menuElement is a id of a div and appendStr ="<span class="bubbleClass"></span>";

$(menuElement).append(appendStr);

However, when i try $(menuElement+ ".bubbleClass").css("background-color", "red"); it doesnt work.

I want the specific div id stored in menuElement variable to be reflected.

found this question, basically the same question i think. http://stackoverflow.com/questions/197748/how-do-i-change-the-background-color-with-javascript — nCore, Mar 08 '14 at 23:11
@nCore Completely different question, because this issue is about selecting the right element, not changing its colour. — Niet the Dark Absol, Mar 08 '14 at 23:12

PlantTheIdea · Accepted Answer · 2014-03-08T23:50:41.987

0

Since you have dynamically added the item to the DOM, you need to use .find() to access it:

$(menuElement).append(appendStr).find('.bubbleClass').css({
    backgroundColor:'red',
    display:'inline'
});

That is an example based on the limited code you provided, but the use of .find() is the key.

Edited to include the display CSS you said you needed to add as well.

edited Mar 08 '14 at 23:50

answered Mar 08 '14 at 23:11

PlantTheIdea

Thank you it worked i have to add display:inline style as well – misthacoder Mar 08 '14 at 23:23
updated my answer to include the `display` CSS setting as well. and glad it worked out, but if my answer helped please apply the checkmark. :) – PlantTheIdea Mar 08 '14 at 23:51

score 0 · Answer 2 · answered Mar 08 '14 at 23:11

0

The reason your code is failing is because your selector looks like this: #someID.bubbleClass

In other words, it's looking for the bubbleClass class name on the menuElement itself, not on its children.

Add a space before the . and it should work just fine.

answered Mar 08 '14 at 23:11

1

I have added a space and tried it.. it still doesnt work – misthacoder Mar 08 '14 at 23:13
Right now your `bubbleClass` has no content... so you can't see its result. Try putting some text in the element. – Niet the Dark Absol Mar 08 '14 at 23:14

score 0 · Answer 3 · answered Mar 08 '14 at 23:23

0

menuElement should be a jQuery selector like "#menuElement" because it's wrapped inside the jQuery object.

$("#menuElement + .bubbleClass").css("background-color","red");

answered Mar 08 '14 at 23:23

Cedric Ipkiss

Yes i had the menuElement variable to hold a string value which is actually a id of a element for example menuElement="#message". @PlantTheIdea user's solution worked for me. – misthacoder Mar 08 '14 at 23:26

3 Answers3