I’m going to show you how easy it is to remove extraneous markup from your html source code using jQuery. Using this method will keep your code cleaner and (more importantly) will make it future layout changes much easier….

Example:

header

Lorem ipsum

Lets say I want a single div around the , and the , how does one do it?

I tried this:

$(“div.box> *”).wrap(”);

The problem is it wraps a div around each child element. Not what I want.

Any suggestions?

$(“img.dropshadow”).wrap(“” + “”);

}); any pointers please?

As for the width of the div, you should at least test setting the width of the div to be less than your images, and the div should expand to contain the image, regardless of the width. A bit of a hack, but might work for you.

As for images without a class, since you’re receiving uploads, you have to be using a server side language to save and process. You could easily add a class using the same server side code. Or, if you knew the parent of the image, or it’s order in the document you could use jQuery to target the nth image.

Finding all images in a particular div is easy:

$(‘div#foo img’).each(function(){ alert(‘function goes here’); });

What if I wanted to get the width of the image (and the width attribute is not set in the html) and then set the width of my wrapper div accordingly? I’m thinking of a caption type situation. Also, what if my images did not have a class (i’m allowing users to upload images), but I wanted to find all images in a particular div, say a content area which does have an id or class?

Thanks,
Scott

Great tutorials, thanks.