Matching Rel Attributes with Jquery
First, please see this post on Doctype
I've been trying to get an answer to this, but have not been successful. The script that the first poster provided works great but, I need this to happen automatically, for all groups of matching Rel's.
Any assistance would be greatly appreciated.
EDIT: For those of you unable to follow the link above, here is the script:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>match rel</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("input[type='button']").click(function(){
$(".photo img").show().css('background','transparent'); //restore visibility
matchImg($("#relval").val());
});
});
function matchImg(relVal){
var sel = ".photo img[rel='" + relVal + "']";
if ($(sel).length > 0) { //check matching rel
开发者_运维问答 $(sel + ":gt(0)").hide(); //hide all except first
$(sel + ":first").css('background','red'); //set background to first
}
}
</script>
<style type="text/css">
.photo img {
padding: 5px;
float: left;
}
</style>
</head>
<body>
<div class="photo">
<img rel="dt" src="http://doctype.com/images/logo-small.png" alt="1" />
<img rel="dt" src="http://doctype.com/images/logo-small.png" alt="2" />
<img rel="dt" src="http://doctype.com/images/logo-small.png" alt="3" />
<img rel="so" src="http://sstatic.net/so/img/logo.png" alt="4" />
<img rel="so" src="http://sstatic.net/so/img/logo.png" alt="5" />
</div>
<p style="clear: both;">
Enter 'dt' or 'so' <input type="text" value="dt" id="relval" />
<input type="button" value="match" />
</p>
</body>
</html>
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).
This script already does this.
However, I need the script to do this automatically, with all matching rel groups, without me having to enter in the rel attribute.
Well the first thing the script would have to do would be to figure out all the "rel" values.
$(function() {
var allRels = {};
$('img[rel]').each(function() {
allRels[$(this).attr('rel')] = true;
});
Then you can go through and hide all but the first (or whatever it is that you want to do):
$.each(allRels, function(rel) {
$('img[rel=' + rel + ']').each(function(i) {
if (i == 0) {
// $(this) is the first image with this particular "rel" value
}
else {
// $(this) is another image in the group, but not the first
}
});
});
});
I haven't tested that but maybe you get the idea.
加载中,请稍侯......
精彩评论