Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › Apply class to parent if child div contains class

  • This topic is empty.
Viewing 15 posts - 16 through 30 (of 30 total)
1 2
  • Author
    Posts
  • September 15, 2012 at 12:17 pm #110116
    ChristinaHooper
    Member

    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!

    September 15, 2012 at 12:26 pm #110120
    TheDoc
    Member

    @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’);
    }
    });

    September 15, 2012 at 8:07 pm #110135
    Taufik Nurrohman
    Participant

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

    September 15, 2012 at 8:12 pm #110136
    ChristinaHooper
    Member

    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

    September 15, 2012 at 9:08 pm #110138
    Taufik Nurrohman
    Participant

    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>
    September 15, 2012 at 10:57 pm #110142
    TheDoc
    Member

    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!

    September 15, 2012 at 11:12 pm #110144
    Taufik Nurrohman
    Participant

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

    January 16, 2013 at 2:42 pm #121185
    eking
    Member

    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”);

    }

    January 16, 2013 at 2:45 pm #121186
    eking
    Member


    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


    January 16, 2013 at 4:48 pm #121194
    markkes
    Member

    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’);

    January 17, 2013 at 9:14 am #121259
    eking
    Member

    Awesome! Thanks so much!

    January 17, 2013 at 2:56 pm #121293
    eking
    Member

    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’);
    });
    });

    January 21, 2013 at 5:01 pm #121768
    eking
    Member

    Okay I got it to work in the CMS! (I had to change some settings) I’m trying to use this same method to change a background color, but it doesn’t seem to work. At first I just thought that it was the CMS but I also can’t get it to work in JS fiddle.

    http://jsfiddle.net/eak819/jmFe7/

    Is something incorrect?

    $(‘.lof-inner div.hot’).siblings(‘.lof-row’).addClass(‘blackred’);

    When sibling .lof-row is found it will add .blackred then CSS takes over from there. I’ve also tried to use the .closest selector but no joy.

    January 24, 2013 at 3:23 pm #122180
    eking
    Member

    I fixed it, thanks guys!

    December 12, 2018 at 2:39 am #280125
    BonnieGalactic
    Participant

    Hey guys :) I am wondering if there are some changes after years, when we have [attribute ~= value] option.

  • Author
    Posts
Viewing 15 posts - 16 through 30 (of 30 total)
1 2
  • The forum ‘CSS’ is closed to new topics and replies.