Basically, I'm taking a grid-layout of photos and modifying them. Some photos are related and some are not. The ones that are related will have matching Rel attributes. I would like jquery to recognize a group of related images (with the same rel), hide all of the images except the first and apply a background image to the container of the first photo (not finalized yet but, it will likely be a div or li).

Oh, but I think it might be better to wrap the first image in the group so you can set a background image to that element doing something like this: $(sel + ":first").wrap('<span class="group"></span>'); I'm also wondering if the page will have the rel tags sorted, if not, the script might end up wrapping too many spans around the image. — Mottie about 8 years ago

@Fudgey, 'wrap' is a good idea, or adding a new css class can do as well (image elements can have background too). As for whether the images of the same 'rel' values will be grouped together, I've thought about it too. The above code will still work, just not as efficient. One way is to keep track of processed images. We'll see how Ben respond. :) — o.k.w about 8 years ago

Instead of assuming that the like "rel" values will be in contiguous runs if `<img>` tags, the code could first go through all the images and build a set of the different "rel" values that are actually on the page. Then, the loop above would iterate through that set and find `<img>` tags with each "rel". The first would be made visible, and the rest would be hidden (or whatever). — Mike McNally about 8 years ago

@O.K.W. , fantastic job! Just tested it and it works great. Once I finish the project I am working on, I will throw in a credit for you, for all your help. I really appreciate it. If you like, I can email you when I'm done. Thanks again :) — Ben about 8 years ago

@Ben, glad it worked for you. Will be good if you can let me know the url of the completed project, that's all I ask for, no other credit required :) — o.k.w about 8 years ago