Question

我在不同的div中有多个图像，但有时2个图像完全相同。如何从页面中删除除这些图像之外的所有图像？

这可以用jquery / javascript吗？甚至是css？

示例：

<div id="Content">
 <div class="Media">
  <img src="1.jpg">
 </div>
</div>
<div id="Content">
 <div class="Media">
  <img src="2.jpg">
 </div>
</div>
<div id="Content">
 <div class="Media">
  <img src="1.jpg">
 </div>
</div>
<div id="Content">
 <div class="Media">
  <img src="4.jpg">
 </div>
</div>
<div id="Content">
 <div class="Media">
  <img src="1.jpg">
 </div>
</div>

我如何制作它只显示其中一个div：

<img src="1.jpg">

这是服务器端代码它返回一个大的json文件，其中包含来自twitter页面的所有帖子但我不认为可以过滤它以便它首先检查重复项吗？

       success: function(data){
           twitter = JSON.parse(data);
                for(var key in twitter.statuses){
                    if (typeof twitter.statuses[key].entities.media != "undefined") {

                            if( $.inArray(twitter.statuses[key].entities.media, container) == -1 ) {
                            container.push(twitter.statuses[key]);
                            }
                        }
                }
           },
       error: function(data){
           console.log(data);
       }

我希望有人知道如何解决这个问题谢谢！

Answer 1

您可以获取所有IMG标记，并查看src是否唯一。如果不是，您可以将其删除。这是一个例子：

$(document).ready(function() {
  var img = $("img");
  var used = {};
  img.each(function() {
    var src = $(this).attr('src');
    if(used[src]) $(this).remove();
    used[src]=1;
  });
})

CodePen：http://codepen.io/cfjedimaster/pen/tDprC

Answer 2

我正在使用jQuery中的filter function。

首先，我从'Media'类中选择所有图像子元素。之后，我使用过滤器函数将匹配元素集合减少到那些不在我的数组中的元素。然后我删除它们。（包括父节点）

我不确定这是否是理想的解决方案，但你可以尝试一下。

$(function() {
var $allImages = $( '.Media > img' ),
    tmp,
    allUsedImageSrcs = [];

$allImages.filter( function() {
    tmp = $( this ).attr( 'src' );

    if( $.inArray( tmp, allUsedImageSrcs ) < 0 ) {
        allUsedImageSrcs.push( tmp );
        return false;
    }

    return true;
}).closest( '#Content' ).remove();});

这是我使用jQuery实现的一个小提琴，尽管你可以在没有jQuery的情况下实现相同的功能。

http://jsfiddle.net/6jb3hoc9/1/

Answer 3

使用javascript你可以像那个（伪）想法那样做

$('#content.media img'){
   //fill the array with src 
   //check if array item is same 
   //remove item 
    var array;//array of src tag
    foreach(item in array as value) 
     if(value['src'] == value['src'])
      {
           arr.remove();
          //remove item from dom **
        }

}

如何从DOM http://www.w3schools.com/js/js_htmldom_nodes.asp

中删除项目

Answer 4

我已经为你写了这个功能。

 window.addEventListener("load", function () {
    var images = Array.prototype.slice.call(document.getElementsByTagName('img'));

    if (images.length == 0) {
        return;
    }

    (function handleImages(imgHash) {
        var process = function (image) {
            if (typeof imgHash[image.src] == 'undefined') {
                imgHash[image.src] = true;
            } else {
                image.parentNode.removeChild(image);
            }
        };

        setTimeout(function () {
            process(images.shift());
            if (images.length > 0) {
                setTimeout(function () {
                    handleImages(imgHash);
                }, 0);
            }
        }, 0);
    })({});
}, false);

关于你的其他问题。您必须将逻辑重写为成功才能成为异步。检查一下：

success: function(data){
    var twitter = JSON.parse(data);
    var props = Object.getOwnPropertyNames(twitter.statuses);
    var result = [];
    var dfd = $.Deferred();

    if (props.length == 0) {
        return;
    }

    (function handleProps(propsHash) {
        var process = function (prop) {
            if (typeof twitter.statuses[prop].entities.media != "undefined" && typeof propsHash[twitter.statuses[prop].entities.media] == 'undefined') {
                result.push(twitter.statuses[prop]);
                propsHash[twitter.statuses[prop].entities.media] = true;
            }
        };

        setTimeout(function () {
            process(props.shift());
            if (props.length > 0) {
                setTimeout(function () {
                    handleProps(propsHash);
                }, 0);
            } else {
                dfd.resolve(result);
            }
        }, 0);
    })({});

    dfd.done(function(result) {
        console.log(result);
    });
}

取而代之的是console.log（结果）;你必须调用其他代码处理结果。

Answer 5

有点不知道你想要什么。

假设您要删除带有重复的src的img元素。

// Retrieve all the images
var imgs = document.querySelectorAll(".Media > img");

// To memorize srcs appear before
var srcExisted = [];

for (var i = imgs.length - 1; i >= 0; i--) {

    if (srcExisted.indexOf(imgs[i].src) < 0) {

        // The 1st appearing, memorize
        srcExisted.push(imgs[i].src);

    } else {

        // Already existed, remove
        imgs[i].parentNode.removeChild(imgs[i]);
        imgs[i] = null;

    }
}

从页面中删除图像（如果已存在）

5 个答案: