jquery - 选择具有相同来源的图像为每个图像添加唯一的类

Question

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

<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">

Answer 1

如果您知道要查找的来源，则可以使用属性选择器：

$("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);

});

小提琴：http: //jsfiddle.net/xX83X/

Answer 2

只是另一种方式，尝试这样的事情：

$(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);
    });

});

见 JsFiddle

Answer 3

这是一个有点绕圈子，但很干净的：

//  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);
});

它可能会在循环遍历唯一值时应用该类，但这更清楚，因为它确保计数正确并且更有趣，因为它使用两个不同的 jqueryeach()函数。

小提琴进行测试。