CODEWITHSUNDEEP
jquerycss
Bamerza
Bamerza

Reputation: 1375

JQuery h2 selector issue

I am having issues getting my JQuery Selector to access a particular HTML element.

I have an <h2> tag which I am trying to remove the CSS class from and then add a new one to it based on some user action.

My <h2> CSS is defined as:

html .image_thumb ul li h2 {
    color : #ffffff;
    font-size: 1.5em; 
    margin: 5px 0; padding: 0;
}

My HTML snippet looks like so:

'<div id="div_image_thumb" class="image_thumb">
<ul>
    <li class="LI1">
        <a href="./images/sample1.jpg"></a>
        <div class="block">
            <h2>This is my header</h2>
            <small>Lorem Ipsum Article Titles Running </small>
            <p>Lorem Ipsum Details...<br /><a href="" target="_blank">Read More</a> </p>
        </div>
    </li>

etc...

My JQuery call looks like so:

$("div#div_image_thumb ul .LI1 div h2").removeClass();

but it does not remove the class. Any ideas?

Upvotes: 0

Views: 6601

Answers (6)

brettkelly
brettkelly

Reputation: 28235

This isn't your problem, but you need to pass a parameter to removeClass(). Like:

$('#foo').removeClass('active');

Change your CSS to actually assign a class to the h2, like this:

html .image_thumb ul li h2.myClass{ 
    color : #ffffff; 
    font-size: 1.5em; 
    margin: 5px 0; 
    padding: 0; 
}

Change this:

<h2>This is my header</h2>

to this:

<h2 class="myClass">This is my header</h2>

And have jQuery do this:

$("div#div_image_thumb ul .LI1 div h2").removeClass('myClass');

Give that a try - good luck

Upvotes: 2

womp
womp

Reputation: 116987

Your selector is incorrect. Try

div#div_image_thumb ul li.LI1 div h2

I would recommend simplifying it waaaay down though. Why not just

".li1 h2"

Upvotes: 0

Phil.Wheeler
Phil.Wheeler

Reputation: 16858

You're trying to remove a class that isn't actually assigned to your H2.

The css properties are defined for <h2> elements in a particular location, but there's no actual class name defined there. Your better option is to use the jQuery.css() method and set individual style properties.

Alternatively, you should use jQuery.addClass and assign a group of styles to your H2 element that override the defaults.

Upvotes: 0

Russ Cam
Russ Cam

Reputation: 125528

try

$("#div_image_thumb div.block > h2").removeClass();

I'll reiterate what everyone else has already said - that <h2> element does not have a class attribute defined.

Upvotes: 0

timdev
timdev

Reputation: 62904

Which class are you trying to remove?

The h2 has no classes associated with it to begin with.

Maybe change your css line apply those styles via some class, and add that class to the h2 in the HTML source?

html .image_thumb ul li h2.startclass { color : #ffffff; font-size: 1.5em; margin: 5px 0; padding: 0; }

Then:

<div id="div_image_thumb" class="image_thumb">
<ul>
        <li class="LI1">
                <a href="./images/sample1.jpg"></a>
                <div class="block">
                        <h2 class="startclass">This is my header</h2>
                        <small>Lorem Ipsum Article Titles Running </small>
                        <p>Lorem Ipsum Details...<br /><a href="" target="_blank">Read More</a> </p>
                </div>
        </li>

Upvotes: 1

marauder
marauder

Reputation: 120

seems like an unnecessarily long selector, try

$(".block > h2").removeClass();

and yeah, jimyi is right, your h2 doesnt have a class attribute in the snippet you posted

Upvotes: 0

Related Questions