Remove CSS Styles onLoad with jQuery

Question

Before I ask the question refer to this jsFiddle: http://jsfiddle.net/AxGHA/3/

I basically want to remove the float: left; StyleSheet attributes on the H2 and P tags IF no image exists within the div with jQuery. Any ideas?

Thanks!

@simchona: I tried using CSS to make it work, and that doesn't work. — Aaron Brewer
– Aaron Brewer, Commented Apr 19, 2012 at 16:43

voigtan · Accepted Answer · 2012-04-19 17:13:50Z

7

you can use :not and :has I have done an example code below:

$(".section:not(:has(>img))").addClass("no-image");

and the CSS for that:

.no-image h2, .no-image p {
    float: none;
    width: auto;
}

example: http://jsfiddle.net/voigtan/AxGHA/5/

">img" instead:

http://jsfiddle.net/voigtan/AxGHA/6/

I'm adding a css class to the .section and style it in the css on how I want it to look.

edited Apr 19, 2012 at 17:13

answered Apr 19, 2012 at 16:55

voigtan

9,0212 gold badges31 silver badges30 bronze badges

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

2 Comments

Aaron Brewer Over a year ago

@voigtan: This is actually great, but for some reason it is not wanting to work. And plus I forgot to add that within the h2 element there is an image to the right, kind of like an arrow to resemble the element. Thank you so much for your help!

voigtan Over a year ago

you can just change the :has(img) to :has(>img) to see if the .section has a direct child of an image: jsfiddle.net/voigtan/AxGHA/6

thecodeparadox · Accepted Answer · 2012-04-19 16:43:40Z

2

if(!$('div.section img').length) {
   $('p, h2', 'div.section').css('float', 'none');
}

answered Apr 19, 2012 at 16:43

thecodeparadox

87.2k22 gold badges143 silver badges164 bronze badges

Comments

dknaack · Accepted Answer · 2012-04-19 16:46:58Z

2

You can do this

$(".section").each(function() {
    var hasImage = $(this).children("img").length != 0;
    if (!hasImage) {
        $(this).find("h2,p").css("float", "none");
    }
});

Check out the updated jsFiddle

answered Apr 19, 2012 at 16:46

dknaack

60.7k28 gold badges166 silver badges211 bronze badges

Comments

Ghokun · Accepted Answer · 2012-04-19 16:43:42Z

1

    $(document).ready(function(){
    if ($("div.section").find("img").length == 0){
        $("h2.section, p.section").css("float", "none")            
    }
});

answered Apr 19, 2012 at 16:43

Ghokun

3,5154 gold badges30 silver badges34 bronze badges

Comments

Serhii Matrunchyk · Accepted Answer · 2012-04-19 16:49:19Z

1

!$('.section img').length && $('.section h2, .section p').css('float', 'none');

answered Apr 19, 2012 at 16:49

Serhii Matrunchyk

9,4587 gold badges38 silver badges49 bronze badges

Comments

Francesco Belladonna · Accepted Answer · 2012-04-19 16:50:19Z

1

I think you can do something like this (notice that I didn't test the code):

$('h2, p').parent('div').each(function(index, $element) {
    if (!$element.has('img'))
        $element.css('float', 'none');
});

Notice that I can't view the jsfiddle from where am I so I based the answer directly on what you explained.

answered Apr 19, 2012 at 16:50

Francesco Belladonna

11.8k14 gold badges84 silver badges152 bronze badges

Collectives™ on Stack Overflow

Remove CSS Styles onLoad with jQuery

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related