CODEWITHSUNDEEP
javascriptjqueryhtmlcssduplicates
Dan121
Dan121

Reputation: 49

Hide divs with duplicate data using jQuery

I have a webpage where a long section of divs are pulled in from another application. I can't filter the divs before they're pulled in, but I need to hide divs (using jquery) that contain duplicate data for certain values.

Divs with duplicate data will always appear adjacent to one another and only come in pairs (never 3 or more divs with the same data), but there might be multiple pairs of duplicates on a page. There will never be more than 25 total .data-results divs on a page.

So, in the (long) example below, since #a-2 and #a-3 have exactly the same values for .data-one-result AND .data-two-result, I need to completely hide one of the divs (either one is fine), but leave #a-1 and #a-4 as-is. I don't care about the values in .data-three and it will have different values even in the duplicate divs.

(edit: changed date-one to data-one because of a typo)

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

Upvotes: 0

Views: 173

Answers (2)

rrk
rrk

Reputation: 15846

Match the span values with the previous elements using each() and slice() functions.

$('.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>

Upvotes: 0

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

Try this : You can iterate all data-results divs and compare result one and two of current div with next div. if result matches then hide next div.

NOTE - You have date-one and data-two where date-one should be data-one (date should be data) for consistency. I have coded using date-one hence make changes once you change in html code. 

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

Upvotes: 1

Related Questions