1

私は次々といくつかのdivを持っています..実際にはこれらのうち10個です。私は、それがdivを通過し、類似した画像が見つかるたびに、div全体が表示されないか、別名display:noneがcssクラスに挿入されるようなjqueryソリューションが必要です。同様の 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>

また、表示される div は 5 つまでです。また、display:none を配置した後に 5 div 未満の場合は、5 div が表示されます。つまり、最後の数個の display:none は表示されないため、常に 5 div が表示されます。

jquery ソリューションがいいでしょう。

4

2 に答える 2

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 に答える