javascript - 在类似的 div 上不显示

Question

我有几个 div 一个接一个……实际上有 10 个。 我想要一个 jquery 解决方案，这样它就可以通过 div，并且每当它发现任何相似的图像时，整个 div 都不会显示，或者又名 display:none 被插入到 css 类中。根据我在代码中的逻辑，类似的 div 只能彼此相邻。如下所示

<div class="tops">

<div class="col-xs-2 topleaderBoardSB">
<p class="smallImages"><img class="img-circle img-responsive" src="32399/images/pics/AxlRose.png"> </p>
<p class="smallText">Axl<br>Roses</p>
</div>

<div class="col-xs-2 topleaderBoardSB">
<p class="smallImages"><img class="img-circle img-responsive" src="32399/images/pics/AxlRose.png"> </p>
<p class="smallText">Axl<br>Roses</p>
</div>

<div class="col-xs-2 topleaderBoardSB">
<p class="smallImages"><img class="img-circle img-responsive" src="32399/images/pics/Eminem.png"> </p>
<p class="smallText">Eminem</p>
</div>

<div class="col-xs-2 topleaderBoardSB">
<p class="smallImages"><img class="img-circle img-responsive" src="32399/images/pics/Eminem.png"> </p>
<p class="smallText">Eminem</p>
</div>

<div class="col-xs-2 topleaderBoardSB">
<p class="smallImages"><img class="img-circle img-responsive" src="32399/images/pics/artistA.png"> </p>
<p class="smallText">artistA</p>
</div>



<div class="col-xs-2 topleaderBoardSB">
<p class="smallImages"><img class="img-circle img-responsive" src="32399/images/pics/artistA.png"> </p>
<p class="smallText">artistB</p>
</div>


<div class="col-xs-2 topleaderBoardSB">
<p class="smallImages"><img class="img-circle img-responsive" src="32399/images/pics/artistA.png"> </p>
<p class="smallText">artistA</p>
</div>



<div class="col-xs-2 topleaderBoardSB">
<p class="smallImages"><img class="img-circle img-responsive" src="32399/images/pics/artistG.png"> </p>
<p class="smallText">artistG</p>
</div>



<div class="col-xs-2 topleaderBoardSB">
<p class="smallImages"><img class="img-circle img-responsive" src="32399/images/pics/artistH.png"> </p>
<p class="smallText">artistH</p>
</div>



<div class="col-xs-2 topleaderBoardSB">
<p class="smallImages"><img class="img-circle img-responsive" src="32399/images/pics/artistI.png"> </p>
<p class="smallText">artistI</p>
</div>

</div>

此外，不会显示超过 5 个 div。并且如果在放置 display:none 后少于 5 个 div，那么无论如何都会显示 5 个 div，也就是最后几个 display:none 不会出现，因此始终显示 5 个 div。

jquery 解决方案会很好。

Answer 1

检查一下:

var images = [],
    img,
    count = 0;

$("img").filter(function(){
    img = $(this).attr("src");

    if($.inArray(img, images) < 0 && count < 5){
        images.push(img);
        count++;
        return false;
    }

    return true;
}).closest($('div')).hide();

它的工作方式是基本上抓取页面上的所有 img 标签，然后根据它们的 src 属性是否唯一来过滤它们。如果不是，则它会找到父 div 并将其隐藏。

由于 $.inArray，这有点不太理想，因此如果对您来说很重要，您可以对其进行调整。

JSFiddle

编辑:现在更新为仅限 5 个结果。