Question

我有几个div，一个在anothr之后......实际上有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。如果在显示后显示少于5个div：none，则无论如何都会显示5个div，也就是最后几个显示：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个结果。

Answer 2

一个简单的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] = '';
    }
  } 
}

修改

如果要限制显示的图像数量，请在确定是否隐藏div时将值传递给该函数并应用它：

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

  limit = typeof limit == 'undefined'? Infinity : --limit;

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

    if (image.src in sources || count > limit) {
      div = upTo(image, 'div');

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

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

如果函数未传递值，则会显示所有唯一图像。否则它只会显示最大限度的图像。如果0通过，则不会显示任何内容。

将display none放在类似的div上

2 个答案:

修改