Jquery search and apply css styles

Question

I want to modify the titlebar jquery plugin showcase, I added the <p class='title> to the description tag so that I can apply css styles to the title and to separate that portion to the actual description. Script:

var $a = $("<a />").attr("href", $container.find("a:first").attr("href")).html("<span>" + $container.find("a:first img").attr("alt") + "</span>");

var $titleBar = $("<div id='subBar' />").html($a);

HTML output:

<div id="subBar"><span><p class="title">Lorem</p>description here</span></div>

From the above structure how can I add css via jquery if <p class='title'> is encountered? I want to add css styles to class title, which is impossible to css because this is generated by javascript.

CSS rulesets are applied to everything in the DOM that they match - it doesn't matter if they come from JS or HTML, so your statement "is impossible to css because this is generated by javascript" is wrong. — Quentin
– Quentin, Commented May 19, 2010 at 14:33
You are trying to generate an invalid DOM. A p element cannot be a child element of a span element. Browser error correction will almost certainly cause inconsistent behavior that trips you up as different browsers try to recover from your error in different ways. — Quentin
– Quentin, Commented May 19, 2010 at 14:34

Brad G. · Accepted Answer · 2010-05-19 14:30:11Z

2

Remove the space between the 'p' and '.title' in your selector:

$container.find("p.title").css('color','red');

(if that's your question)

Update: Your jquery selector will still work fine even if the DOM element you are trying to access is generated by Javascript. You can test this in the javascript console (e.g. Firebug) of your browser. You just have to make sure your code is executed after the code that generates the title element.

However, do you really need to use Javascript here? If you just want to set paragraphs with class 'title' to red, just add some css:

p.title { color: red; }

edited May 19, 2010 at 14:30

answered May 19, 2010 at 13:22

Brad G.

8215 silver badges13 bronze badges

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

Collectives™ on Stack Overflow

Jquery search and apply css styles

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related