使用jQuery隐藏包含重复数据的div

Question

我有一个网页，其中一长段的div从另一个应用程序中拉入。我不能在插入div之前过滤div，但我需要隐藏包含某些值的重复数据的div（使用jquery）。

带有重复数据的分部总是会彼此相邻并且只能成对出现（从不会有3个或更多具有相同数据的div），但在页面上可能会有多对重复项。在页面上永远不会超过25个.data-results div。因为＃a-2和＃a-3对于.data-one-result AND .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。

注意 - 你必须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>