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