使用jQuery唯一过滤重复的img src或删除

时间:2011-12-07 13:17:28

标签: jquery image unique

我尝试过这里讨论过的不同的解决方法,但是没有一个在我的案例中工作。

这是我的来源:

<div class="colourDots">
   <img src="/out/pictures/generated/product/8/300_450_100/60028.bl.jpg"/><br>
   <img src="/out/pictures/generated/product/8/300_450_100/60028.bl.jpg"/><br>
   <img src="/out/pictures/generated/product/8/300_450_100/60028.bl.jpg"/><br>
   <img src="/out/pictures/generated/product/8/300_450_100/60028.sw.jpg"/><br>
   <img src="/out/pictures/generated/product/8/300_450_100/60028.bl.jpg"/><br>
   <img src="/out/pictures/generated/product/8/300_450_100/60028.bl.jpg"/><br>
   <img src="/out/pictures/generated/product/8/300_450_100/60028.bl.jpg"/><br>

我想只展示上面列表中唯一的“img src”,没有重复的图片......

脚本:

var uniqueImg = $(".colourDots img").get();
divs = $.unique(uniqueImg);

我再次获得相同的来源: - (

任何想法或任何其他解决方法?

4 个答案:

答案 0 :(得分:4)

试试这个:

$(function(){
    var srcs = [],
        temp;
    $(".colourDots img").filter(function(){
        temp = $(this).attr("src");
        if($.inArray(temp, srcs) < 0){
            srcs.push(temp);   
            return false;
        }
        return true;
    }).remove();
});

以下是链接http://jsfiddle.net/xCjjp/

答案 1 :(得分:0)

你可以使用:

$(".colourDots img").​​​​​​​​each(function(){
    if($(this).parent().length)
        $(".colourDots img:contains('" + $(this).jpg() + "')").not(this).remove();
});​

请参阅http://www.jquery4u.com/jquery-functions/jquery-each-examples/

答案 2 :(得分:0)

我要做的是,首先将所有图像标记的src attr放入数组

var img_array = $(".colourDots img").map(function() {
  return $(this).attr("src");
});

现在我可以在这个数组中执行重复检查过程并删除所有在这个数组中多次找到src的img,这里所有的img都被删除所以我将添加一个src的单个图像。

答案 3 :(得分:0)

这是我从所有答案中汇总的另一个版本:

var img_array = $(".colourDots img").map(function() {
  return $(this).attr("src");
});
img_array = $.unique(img_array);
img_array.each(function(index, value){
    var sel = '.colourDots img[src="' + value+ '"]';
    $(sel).not($(sel + ':first')).remove();
});

http://jsfiddle.net/GZWY5/3/