Javascript 将display none置于类似的DIV上

我一个接一个地跳了好几个舞。。实际上有10个。 我想要一个jquery解决方案，这样它就可以遍历div，并且每当它发现任何类似的图像时，都不会显示整个div，或者也就是display：在css类中插入none。类似的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>

Axl
玫瑰


Axl
玫瑰


阿姆


阿姆


artistA

artistB

artistA

艺术家

artistH

artistI

此外，显示的div不超过5个。如果在显示：无后少于5个div，则将显示5个div，即最后几个显示：无将不存在，因此始终显示5个div。

jquery解决方案会很好

看看这个：

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

var images=[]，
img，
计数=0；
$（“img”）.filter（函数（）{
img=$（this.attr（“src”）；
if（$.inArray（img，图像）<0&&count<5）{
图像推送（img）；
计数++；
返回false；
}
返回true；
}).closed（$（'div'））.hide（）；

其工作原理是，它基本上获取页面上的所有

img

标记，然后根据它们的

src

属性是否唯一对它们进行过滤。如果不是，则会找到父级

div

，并将其隐藏

由于

$.inArray

的原因，这一点没有达到最佳效果，因此如果对您有影响，您可以对其进行调整

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

查看以下内容：

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

var images=[]，
img，
计数=0；
$（“img”）.filter（函数（）{
img=$（this.attr（“src”）；
if（$.inArray（img，图像）<0&&count<5）{
图像推送（img）；
计数++；
返回false；
}
返回true；
}).closed（$（'div'））.hide（）；

其工作原理是，它基本上获取页面上的所有

img

标记，然后根据它们的

src

属性是否唯一对它们进行过滤。如果不是，则会找到父级

div

，并将其隐藏

由于

$.inArray

的原因，这一点没有达到最佳效果，因此如果对您有影响，您可以对其进行调整

---

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

简单的JS解决方案是：

function upTo(el, tagName) {
  el = el && el.parentNode;
  tagName = tagName.toLowerCase();

  for ( ;el; el = el.parentNode) {
    if (el.tagName && el.tagName.toLowerCase() == tagName) {
      return el;
    }
  }
  return null;
}

function hideSimilarImages() {
  var image, images = document.images;
  var sources = {};
  var div;

  for (var i=0, iLen=images.length; i<iLen; i++) {
    image = images[i]

    if (image.src in sources) {
      div = upTo(image, 'div');

      if (div && div.style) div.style.display = 'none';

    } else {
      sources[image.src] = '';
    }
  } 
}

函数最多（el，标记名）{
el=el&&el.parentNode；
标记名=标记名.toLowerCase（）；
对于（；el；el=el.parentNode）{
if（el.tagName&&el.tagName.toLowerCase（）==标记名）{
返回el；
}
}
返回null；
}
函数hideSimilarImages（）{
var image，images=document.images；
变量源={}；
var-div；
对于（var i=0，iLen=images.length；i普通JS解决方案是：

function upTo(el, tagName) {
  el = el && el.parentNode;
  tagName = tagName.toLowerCase();

  for ( ;el; el = el.parentNode) {
    if (el.tagName && el.tagName.toLowerCase() == tagName) {
      return el;
    }
  }
  return null;
}

function hideSimilarImages() {
  var image, images = document.images;
  var sources = {};
  var div;

  for (var i=0, iLen=images.length; i<iLen; i++) {
    image = images[i]

    if (image.src in sources) {
      div = upTo(image, 'div');

      if (div && div.style) div.style.display = 'none';

    } else {
      sources[image.src] = '';
    }
  } 
}

函数最多（el，标记名）{
el=el&&el.parentNode；
标记名=标记名.toLowerCase（）；
对于（；el；el=el.parentNode）{
if（el.tagName&&el.tagName.toLowerCase（）==标记名）{
返回el；
}
}
返回null；
}
函数hideSimilarImages（）{
var image，images=document.images；
变量源={}；
var-div；
对于（var i=0，iLen=images.length；i）“相似的图像”是什么意思？准确地说，+1@Evan，你知道图像相似的唯一方法是如果url相同，或者一些你可能不想参与的疯狂的图像处理。基本上，以下div相似，因为url相同。我们不需要去做图像处理。只需查看文件名即可。
Axl
Roses
Axl
Roses
在我看来，您真正的要求是定义一个可应用于src属性的“相似”测试。您所说的“相似的图像”是什么意思？准确地说，+1@Evan，你知道图像相似的唯一方法是如果url相同，或者一些你可能不想参与的疯狂的图像处理。基本上，以下div相似，因为url相同。我们不需要去做图像处理。只需查看文件名即可。
Axl
Roses
Axl
Roses
在我看来，您的真正需求是定义“类似”的测试这可以应用于src属性。您可以使用
var images=document.images
，因为默认情况下在所有浏览器中都存在。Neat@RobG-不知道这一点。在这种情况下也会应用类似的概念。您可以使用
var images=document.images
，因为默认情况下在所有浏览器中都存在。Neat@RobG-不知道关于这一点，类似的概念也适用于这种情况。