Treehouse: Grow your CSS skills. Land your dream job.
Forums » CSS Combat »

Apply class to parent if child div contains class

  • theacefes
    # September 12, 2012 at 1:06 pm

    Well for us it’s about maintaining a consistent standard across the board I think. On a personal level, whatever makes one comfortable I think. :)

    Taufik
    # September 15, 2012 at 5:26 am 
    $(document).ready(function() {
    
$('div').each(function() {
    
var foo = this.className; // Get the element class...
    
if ($(this).hasClass(foo)) {
    
$('body').addClass(foo);
    
}
    
});
    
});
    ChristinaHooper
    # September 15, 2012 at 12:17 pm

    I spent years working as a .NET developer, and working with other programmers that used crazy abbreviations and all lower case for their variables, and it just made it really really hard to follow the progression of their code. So I started Camel Case then and just kept going with it since to me, it made it more readable.

    @theacefes – Kudos on your first CodePen

    @Hompimpa – I finally got it working with your example and a combination of getting that code coming after the jquery call.

    @Everyone – Thank-you so much for all your help!

    TheDoc
    # September 15, 2012 at 12:26 pm

    @Hompimpa – that code doesn’t look quite right to me. The body is going to end up with basically all of the classes that are present on the page.

    `$(this).hasClass(foo)` is always going to return true.

    @ChristinaHooper – if you’re looking at a specific div only, this should be what you’re after:

    $(document).ready(function() {
    if( $(‘#target’).hasClass(‘blue’) ) {
    $(document.body).addClass(‘yellow’);
    }
    });

    Taufik
    # September 15, 2012 at 8:07 pm

    @TheDoc: That’s just an example. I guess @ChristinaHooper can understand what I mean :p

    ChristinaHooper
    # September 15, 2012 at 8:12 pm

    I think @Hompimpa ‘s example worked for me since I only have one div that has the class I’m searching for.

    @TheDoc Your example would be more reliable in most cases though I would think

    Taufik
    # September 15, 2012 at 9:08 pm

    This is better:

    $(document).ready(function() {
    
if ($('#target').length) {
    
var color = $('#target').attr('class');
    
$('body').addClass(color); // or: $('#target').parent().addClass(color);
    
}
    
});
    <body>
    
...
    
<div id="target" class="red"></div>
    
...
    
<body>
    TheDoc
    # September 15, 2012 at 10:57 pm

    I don’t think that’s better at all.

    For starters, you don’t need to check `#target` length, that’s an extra step that isn’t necessary. Checking `hasClass()` will return true or false and will execute only if true. Since we’re only checking for something specific, this is significantly more effective.

    Second, setting a variable isn’t what we’re looking for, since you’ll be collecting *all* classes assigned to the `#target` div. What if you are looking for a classing of `red` but want to add a class of `blue` to the body?

    Third, `$(document.body)` should be used over `$(‘body’)` based on speed alone.

    You’re adding things that aren’t particularly necessary to this issue, my friend!

    kgscott284
    # September 15, 2012 at 11:06 pm

    ^ I second that…

    Taufik
    # September 15, 2012 at 11:12 pm

    @TheDoc: Yes. You’re right: http://jsfiddle.net/tovic/yJ6Mg/18/

    eking
    # January 16, 2013 at 2:42 pm

    Hi, I’m new here but I saw TheDoc’s solution so I figured I should signup. I’m trying to add some colors to some CMS rendered code, and need a way to change a parent’s style, when an ID is present in the child. The problem is that new class is entered on all of the matching classes not just the one with the child.

    if($(‘.lof-inner div’).hasClass(‘hot’)) {
    $(“.lof-title”).addClass(“blinkurgent”);

    }

    eking
    # January 16, 2013 at 2:45 pm


    Title
    Thursday, 10 January 2013 14:55

    Some text

    Text

    Text

    Some Text

    Title
    Thursday, 10 January 2013 14:55

    Some text

    Text

    Text

    Some Text


    markkes
    # January 16, 2013 at 4:48 pm

    eking try this: http://jsfiddle.net/SpVLK/3/

    As u see both will work:

    $(‘.lof-inner .hot’).closest(‘.lof-inner’).find(‘.lof-title’).addClass(‘blinkurgent’);
    $(‘.lof-inner .hot’).siblings(‘.lof-title’).addClass(‘bold’);

    eking
    # January 17, 2013 at 9:14 am

    Awesome! Thanks so much!

    eking
    # January 17, 2013 at 2:56 pm

    Okay, I apologize for my confusion I’ve added this to my document like this but It’s not working any suggestions?

    $(document).ready(function(){
    $(“body”).focus(function(){
    $(‘.lof-inner div.hot’).closest(‘.lof-inner’).find(‘.lof-title’).addClass(‘blinkurgent’);
    $(‘.lof-inner div.hot’).siblings(‘.lof-title’).addClass(‘bold’);
    });
    });

Viewing 15 posts - 16 through 30 (of 32 total)
1 2 3

You must be logged in to reply to this topic.

What now? I have some ideas for you.

Go explore CodePen!

As a front end designer and developer, you should have an account on CodePen so you can save your snippets, present your ideas, and engage with the rest other front end folk. I'd encourage you to go PRO as well, to unlock the full power of CodePen.

Go PRO on CodePen

Get the newsletter!

You should sign up for the CSS-Tricks newsletter. It's a clean copy of all the blog posts each week, combined together, right to your inbox. If email isn't your thing, there is an RSS feed, iTunes, and lots of other ways to subscribe.

Subscribe to The Lodge!

The Lodge is a members-only, ad-free video learning area here on CSS-Tricks. Just like the free screencasts, but organized into four large complete series. Membership is also the #1 best way to support CSS-Tricks.

Signup for The Lodge

Peruse Jobs!

Always good to keep your eye on the field.

If you're looking to hire, posting your job on the CodePen job board means it will be shown here on CSS-Tricks and on the ShopTalk job board as well.

Post a Job

We can do the real footer now.