Using jQuery to Add a Class Attribute to images, etc. on Page?

Question

Li'l Help? Apologies in advance due to my jQuery.noob status, but I'm drawing a blank and about out of ideas on why this isn't working. Maybe someone here can see something I'm not? I'd surely appreciate any help.

The Issue

This webpage has several images on it (also paragraphs, etc.) that I want to add a class to. They don't currently have a class on them.

Why I want to Add a Class

I want to use CSS3 to target that class and style anything that has it. More specifically this is going to be a pop-in menu and I'd like to adjust the opacity of it and animate its entry & exit.

How I'm attempting to do This

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
    $("document").ready(function() {
        $("img").addClass("menumain");
                   alert("Here I am!"); //This alert will go when I figure this out, I just added it to see if it pops up (it does).
    });
</script>

I've Also Tried it This Way (Note: All of my images contain the string "menumain-" in the file names)

<script type="text/javascript" src="../jquery-1.7.2.min.js"></script>
<script type="text/javascript">
    $("document").ready(function() {
        $("img[src*=menumain-]").attr({class:"menumain"});

    });
</script>

So What Happens When I Try it?

Nothing. I load the page, (that alert does pop up, which I dismiss) then expand out the body using firebug and / or Safari developer tools, etc. and drill down to the images on the page. I see the image attributes, but I don't see where the class was added, much less defined as "menumain" which is what I want the class to be.

Part of Why This is Driving me Crazy

I have another jQuery script on the same page which does something similar. It adds attributes, not a Class attribute, but other attributes to the main Div which surrounds the whole page. I don't have any problems with that jQuery function, so I don't see why this one isn't working.

Why Might it Not Be Working

I've checked the syntax 9 ways from Sunday, but I don't see anything wrong. Still, you know how proof reading syntax can be.

Secondly the images I'm targeting (I'm also going to try to get the text and buttons in the menu tagged in this same class) are buried down in Divs like this:

<div id="image194" style="visibility: inherit;">
     <a name="image194anc">
          <img width="317" height="564" border="0" alt="menumain-bg-317x564"    src="images/menumain-bg-317x564.png" name="image194Img">
     </a>
</div>

I'm assuming that my targeting of $("img[src=menumain-]")* will find those images whether they are in Divs or not, but maybe I'm wrong on that?

One More Thing

This "web page" is generated by an application called Lectora by Trivantis. It's a WYSIWYG authoring tool for instructional designers (who are NOT web developers) who create on line training. So it's not as if I'm creating this whole thing in DreamWeaver or can change the entire approach to the web design. But I should be able to pop a class on a set of page elements and target them with CSS, no?

Please tell me if you see anything wrong. Here's a version of the page --> http://bit.ly/Rijnl8

Answer 1

jQuery has a built-in method for adding classes.

<script type="text/javascript" src="../jquery-1.7.2.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("img[src*=menumain-]").addClass("menumain");

    });
</script>

http://api.jquery.com/addClass

Answer 2

You could put the images you want styling inside container divs, then do

$('.container').addClass('yourClass');

then in the class, use

.yourClass img {}

to style all of the images within those containers. It's a workaround, but it should fix your problem! Also, in HTML5, the use of type="text/javascript" within the <script> tags is no longer required.