Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by John Locke
John Locke
15,479 Points

Using jQuery to add CSS dynamically if element exists in div

Hello everyone:

I've run into a sticky problem. Working on a site with a huge amount of content. The new design for the main page has latest posts: Photo to the left -> H1 and text to the right

Here's the problem with that:

Site has all kinds of posts: some with videos, some with an image, some not. This is a WordPress site; assume everything is going to be entered via WYSIWYG.

What I would Like: If a post excerpt on the Home Page contains an image, use jQuery to add CSS to the H1. I think I can use the jQuery method .contains() to pull this off. Please let me know how you would solve this.

3 Answers

Andrei-Robert Rusu
Andrei-Robert Rusu
763 Points

Well, My guess is that you have multiple posts, and you use the h1 tag multiple times for displaying the name, I would personally do something like this : http://codepad.org/mZqASlpS

John Locke
John Locke
15,479 Points

That is actually pretty much what I needed, Andrei-Robert and James This is what I ended up using.

 $(".post .post-img").closest(".post").find("h1").addClass("h1-adjustment");
Andrei-Robert Rusu
Andrei-Robert Rusu
763 Points

Glad you figured it out :)

John Locke
John Locke
15,479 Points

I created a JSFiddle that shows the ultimate solution that I came to.

http://jsfiddle.net/lockedown/vkeeD/1/

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

Not completely sure I understand what you are trying to do, but how about something like this.

If the home page contains an image then use addclass () against the H1

Then make all of your CSS changes using that class.

John Locke
John Locke
15,479 Points

Thanks James! I will try this solution next.

John Locke
John Locke
15,479 Points
John Locke
John Locke
15,479 Points

The final solution to make everything look the same with widely varying types of content in the posts involved a combination of adding classes when an element is detected (per James), and switching the positions of the elements in the DOM on those posts where a certain element was detected.

I would never have known this if I hadn't had the actual content in place in my test environment. With different sized photos and H1s, the styles had to look the same no matter what the people maintaining the site chose to do in the posts. This is the most important consideration when evaluating an assignment.

I have lots of tutorials to write about from this job alone, hopefully I can find time to write those soon.

James Barnett
James Barnett
39,199 Points

I would love to read anything you write up about this and other similar adventures in code you have.

John Locke
John Locke
15,479 Points

Yeah, I need to keep adding all these solutions to my GitHub, just so I don't lose them later, too.

http://jsfiddle.net/lockedown/vkeeD/1/

James Barnett
James Barnett
39,199 Points

I love using codepen for most of the small CSS/JavaScript solutions I come up with. For anything larger definately github is the way to go.

Andrei-Robert Rusu
Andrei-Robert Rusu
763 Points

:) what if the image loads really slow or it gets removed ? I think I've made a possible solution : http://jsfiddle.net/vkeeD/4/

John Locke
John Locke
15,479 Points

James : I'll put it up on Codepen as well, I like it a lot better too.

Andrei-Robert Rusu : Impressive improvement. I hate using solutions that I can't debug by myself, and straight up Javascript is still my weak point. jQuery I can handle, because of it's similarity to CSS. The client has a CDN in place, so hopefully nothing should lag that hard. Thanks for your help, suggestions, and forks.

Andrei-Robert Rusu
Andrei-Robert Rusu
763 Points

No problem, anytime, it was fun