Using jQuery to replace text inside H3 header

Question

I tried to keep the code as simple/clean as possible. There is an h3 inside of two DIVs. The top DIV has an ID, the inner DIV a unique class.

$("#Events .event-header h3").html("your new header");

I also tried:

$("#Events .event-header h3").text("your new header");

Neither work. When I try them in the Chrome console, it tells me that the element I'm referencing is undefined and it doesn't know what text to target. The DIV structure couldn't be more simple and clear. I don't know how else to reference the h3 tag.

Any tips? (I've fixed the typo in the .event-header class - Apparently, posting comments instead of doing that previously is a grave sin. Happy Halloween?)

Solution

Your class is .event-header not .events-header

There is an extra "s" at events.

So try this

$("#Events .event-header h3").text("your new header");

Fiddle

Comments

[user1729506]

I've actually been sticking with $("#Events h3").text("your new header"); - which works on JsFiddle, but not my site. Double-checking my live code, the class reference is ok. I just messed up here. But it still doesn't work.

[VVV]

Well even with your new selector it still works: jsfiddle.net/Kh7dw/2 Like I said before, the error is somewhere else.