javascript - 使用 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 中它也会有不同的值。

(编辑:由于打字错误，将 date-one 更改为 data-one)

<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>