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.

ie input#unique and img#unique

Therefore, it is not always redundand if you use CSS on more then one DOM - and you should

It is unlikely, but definitely possible for IDs to match across multiple pages, especially if you have dynamic content.

If you’re nesting the image inside a link, I would think you’d want to target the link (instead of the image) for wrapping with the divs.

Let me know what you find.

As an analogy… I’ve shown readers how jQuery lets you “chain” methods together and make the javascript very small, clean, and concise. But if you choose not to chain them, and write out each instruction long hand, you don’t get negative points… it still works.

Just to be clear: I agree with your point but disagree on the importance.

in the “A Closer Look” paragraph you wrote:

> you could do something like $(”img#dropshadow”)

This is something I see too often. When referencing an ID (”#xyz”) with CSS syntax, its always redundant to put selectors in front of the ID. An ID must be unique, so it can not be specified any uniquer.

I like your tutorials (as I like JQuery), so please keep them clean

Both fixed. Thanks.

“And then the images would be styled like so:
”

Shouldn’t you add a ‘class=”dropshadow”‘ in the img-tag?!