1

我有几个 div 一个接一个 .. 实际上有 10 个。我想要一个 jquery 解决方案，以便它通过 div 并且每当它找到任何相似的图像时，都不会显示整个 div 或在 css 类中插入 aka display: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>

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

一个 jquery 解决方案会很好。

4

2 回答 2

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 个结果。

于 2013-10-30T01:25:50.200 回答
0

一个简单的 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通过，则不会显示任何内容。

于 2013-10-30T01:53:05.730 回答