Jquery 选择具有相同源的图像以向每个图像添加唯一类

我想将相同的类添加到源相同的图像中。比如我有这个

<img src="abc.png">
<img src="abc.png">
<img src="def.png">
<img src="def.png">
<img src="ghi.png">

我想跟你谈谈

<img src="abc.png" class="g1">
<img src="abc.png" class="g1">
<img src="def.png" class="g2">
<img src="def.png" class="g2">
<img src="ghi.png" class="g3">

---

如果您知道要查找的源，只需使用属性选择器即可：

$("img[src='abc.png']").each(function () {
    $(this).addClass("g1");
});

$("img[src='def.png']").each(function () {
    $(this).addClass("g2");
});

$("img[src='ghi.png']").each(function () {
    $(this).addClass("g3");
});

如果源是动态的，请尝试以下操作：

var items=new Object();
var idx = 0;
$("img").each(function () {

    var src = $(this).attr("src");
    var newClass = "";
    if (items[src])
        newClass = items[src];
    else {
        idx++;
        newClass = "g" + idx;
        items[src] = newClass;
    }

    $(this).addClass(newClass);

});

---

小提琴：

另一种方法，试试这样的方法：

$(document).ready(function () {

    var images = $("img") , number = 0 , imgLastSrc = null;
    images.each(function(){
        var imgSrc = $(this).attr("src");
        if(imgSrc != imgLastSrc){         
            imgLastSrc = imgSrc;
            number++;
        }
        $(this).addClass("g" + number);
    });

});

---

见

这里有一个有点圆但干净的：

//  get jquery object of img elements
var allImages = $('img[src]');

// filter out duplicates
allImages = $.unique(allImages);

// instantiate empty array to hold src attr values
var imageSrcs = [];


// loop through elements and push unique src values to imageSrcs   
allImages.each(function() {
  if ( $.inArray( $(this).attr('src'), imageSrcs ) == -1) {
    imageSrcs.push($(this).attr('src'));
  }
});

// loop through unique src attributes array and use in selector to apply .addClass     
$.each(imageSrcs, function(index, value) {
    $("img[src='" + value + "']").addClass("g" + index);
});

它可能会在循环遍历唯一值时应用该类，但这更清楚，因为它可以确保计数正确，而且更有趣，因为它使用了两个不同的jquery

each（）

函数

---

根据您的示例，您还希望对那些不与任何其他img元素共享src的图像应用一个类，对吗？因此，如果在您的示例中，所有5个都是唯一的，那么类将是

g1

到

g5

？很抱歉，如果我没有正确理解您的意思，那么类名称实际上是动态的，并且每一组相同的图像都会改变1度。例如g1到g2，所有这些图像都包含在一个div中，比如说myImagesSo，如果abc.png也出现在列表的末尾，它应该与第一个元素具有相同的类？是的，你是正确的，但动态源是问题所在。@Azee我添加了一个动态示例。