使用 jQuery 隐藏具有重复数据的 div

Question

我有一个网页，其中很长一段 div 是从另一个应用程序中提取的。我无法在它们被拉入之前过滤 div，但我需要隐藏包含某些值的重复数据的 div（使用 jquery）。

具有重复数据的 div 将始终彼此相邻出现，并且只能成对出现（永远不会有 3 个或更多 div 具有相同的数据），但一个页面上可能会有多对重复。一个页面上的 .data-results div 总数永远不会超过 25 个。

因此，在下面的（长）示例中，由于#a-2 和#a-3 具有完全相同的 .data-one-result 和 .data-two-result 值，我需要完全隐藏其中一个div（任何一个都可以），但保留 #a-1 和 #a-4 原样。我不关心 .data-three 中的值，即使在重复的 div 中它也会有不同的值。

（编辑：由于拼写错误，将日期一更改为数据一）

<div class="data-results" id="a-1">
  <div class="data-holder">

    <div class="data-one">
    <span class="data-one-label">One:</span>
    <span class="data-one-result">$50</span>
    </div>

    <div class="data-two">
    <span class="data-two-label">Two:</span>
    <span class="data-two-result">85</span>
    </div>

     <div class="data-three">
    <span class="data-three-label">Three:</span>
    <span class="data-thee-result">200</span>
    </div>

  </div>                                                                   
</div>

<div class="data-results" id="a-2">
  <div class="data-holder">

    <div class="data-one">
    <span class="data-one-label">One:</span>
    <span class="data-one-result">$50</span>
    </div>

    <div class="data-two">
    <span class="data-two-label">Two:</span>
    <span class="data-two-result">75</span>
    </div>

     <div class="data-three">
    <span class="data-three-label">Three:</span>
    <span class="data-thee-result">300</span>
    </div>       

  </div>                                                                   
</div>

<div class="data-results" id="a-3">
  <div class="data-holder">

    <div class="data-one">
    <span class="data-one-label">One:</span>
    <span class="data-one-result">$50</span>
    </div>

    <div class="data-two">
    <span class="data-two-label">Two:</span>
    <span class="data-two-result">75</span>
    </div>

    <div class="data-three">
    <span class="data-three-label">Three:</span>
    <span class="data-thee-result">400</span>
    </div>

  </div>                                                                   
</div>

<div class="data-results" id="a-4">
  <div class="data-holder">

    <div class="data-one">
    <span class="data-one-label">One:</span>
    <span class="data-one-result">$30</span>
    </div>

    <div class="data-two">
    <span class="data-two-label">Two:</span>
    <span class="data-two-result">75</span>
    </div>

    <div class="data-three">
    <span class="data-three-label">Three:</span>
    <span class="data-thee-result">500</span>
    </div>

  </div>                                                                   
</div>

Answer 1

试试这个：您可以迭代所有data-results div，并将当前 div 的结果一和二与下一个 div 进行比较。如果结果匹配则隐藏下一个 div。

注意 - 您有date-one 和data-two，其中date-one 应该是data-one（日期应该是数据）以保持一致性。我已经使用date-one 进行了编码，因此一旦您更改了 html 代码，请进行更改。

$(function(){
  $('div.data-results').each(function(){
    if($(this).is(':visible'))
     {
        var $nextDiv = $(this).next('div.data-results');
        if($nextDiv.length > 0)
        {
           var thisResultOne = $(this).find('div.date-one .data-one-result').text();
           var nextResultOne = $nextDiv.find('div.date-one .data-one-result').text();
          
           var thisResultTwo = $(this).find('div.data-two .data-two-result').text();
           var nextResultTwo = $nextDiv.find('div.data-two .data-two-result').text();
          
           if(thisResultOne == nextResultOne && thisResultTwo == nextResultTwo)
          {
              $nextDiv.hide();
          }
        }
     }
    
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="data-results" id="a-1">
  <div class="data-holder">

    <div class="date-one">
    <span class="data-one-label">One:</span>
    <span class="data-one-result">$50</span>
    </div>

    <div class="data-two">
    <span class="data-two-label">Two:</span>
    <span class="data-two-result">85</span>
    </div>

     <div class="data-three">
    <span class="data-three-label">Three:</span>
    <span class="data-thee-result">200</span>
    </div>

  </div>                                                                   
</div>

<div class="data-results" id="a-2">
  <div class="data-holder">

    <div class="date-one">
    <span class="data-one-label">One:</span>
    <span class="data-one-result">$50</span>
    </div>

    <div class="data-two">
    <span class="data-two-label">Two:</span>
    <span class="data-two-result">75</span>
    </div>

     <div class="data-three">
    <span class="data-three-label">Three:</span>
    <span class="data-thee-result">300</span>
    </div>       

  </div>                                                                   
</div>

<div class="data-results" id="a-3">
  <div class="data-holder">

    <div class="date-one">
    <span class="data-one-label">One:</span>
    <span class="data-one-result">$50</span>
    </div>

    <div class="data-two">
    <span class="data-two-label">Two:</span>
    <span class="data-two-result">75</span>
    </div>

    <div class="data-three">
    <span class="data-three-label">Three:</span>
    <span class="data-thee-result">400</span>
    </div>

  </div>                                                                   
</div>

<div class="data-results" id="a-4">
  <div class="data-holder">

    <div class="date-one">
    <span class="data-one-label">One:</span>
    <span class="data-one-result">$30</span>
    </div>

    <div class="data-two">
    <span class="data-two-label">Two:</span>
    <span class="data-two-result">75</span>
    </div>

    <div class="data-three">
    <span class="data-three-label">Three:</span>
    <span class="data-thee-result">500</span>
    </div>

  </div>                                                                   
</div>

Answer 2

使用 each() 和 slice() 函数将跨度值与前面的元素匹配。

$('.data-holder > div').each(function(){
    var currElement = $(this);
    var index = $('.data-holder > div').index($(this))-1;
    var previousElements = $('.data-holder > div').slice( 0, index <= 0 ? 0 : index );
    console.log(previousElements);
    previousElements.each(function(){
        if(
           $('span',this).first().text() == $('span', currElement).first().text() && 
           $('span',this).last().text() == $('span', currElement).last().text()
        ){
           currElement.hide();
        }
    })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="data-results" id="a-1">
  <div class="data-holder">

    <div class="date-one">
    <span class="data-one-label">One:</span>
    <span class="data-one-result">$50</span>
    </div>

    <div class="data-two">
    <span class="data-two-label">Two:</span>
    <span class="data-two-result">85</span>
    </div>

     <div class="data-three">
    <span class="data-three-label">Three:</span>
    <span class="data-thee-result">200</span>
    </div>

  </div>                                                                   
</div>

<div class="data-results" id="a-2">
  <div class="data-holder">

    <div class="date-one">
    <span class="data-one-label">One:</span>
    <span class="data-one-result">$50</span>
    </div>

    <div class="data-two">
    <span class="data-two-label">Two:</span>
    <span class="data-two-result">75</span>
    </div>

     <div class="data-three">
    <span class="data-three-label">Three:</span>
    <span class="data-thee-result">300</span>
    </div>       

  </div>                                                                   
</div>

<div class="data-results" id="a-3">
  <div class="data-holder">

    <div class="date-one">
    <span class="data-one-label">One:</span>
    <span class="data-one-result">$50</span>
    </div>

    <div class="data-two">
    <span class="data-two-label">Two:</span>
    <span class="data-two-result">75</span>
    </div>

    <div class="data-three">
    <span class="data-three-label">Three:</span>
    <span class="data-thee-result">400</span>
    </div>

  </div>                                                                   
</div>

<div class="data-results" id="a-4">
  <div class="data-holder">

    <div class="date-one">
    <span class="data-one-label">One:</span>
    <span class="data-one-result">$30</span>
    </div>

    <div class="data-two">
    <span class="data-two-label">Two:</span>
    <span class="data-two-result">75</span>
    </div>

    <div class="data-three">
    <span class="data-three-label">Three:</span>
    <span class="data-thee-result">500</span>
    </div>

  </div>                                                                   
</div>