Compare old and new price for each element if any is equal or not-CodePudding

I'm looking for a help with my code to compare prices between old and new price.

My code doesn't work as it should, I'm trying to compare two arrays one is for old price and one for new price. All the time when trying to check if old price is equal to new price it doesn't work. It logs properly all prices but if trying to compare them nothing happens. Besides that when trying to check if old price is less or equal to new price it works but not as expected. It applies to every item, even to price where old is higher than new one.

I created quick fiddle with my code and appreciate any pointers.

var NewPArr = [];
var NewP = $('.item .price_new').each(function() {  
    NewPArr.push($(this).text());
});

var OldPArr = [];
var OldP = $('.item .price_old').each(function() {  
    OldPArr.push($(this).text());
});

 if ( OldPArr == NewPArr ) {
console.log('it works');
 //   $('.item .price_old').hide();
    $('.item .price_old').addClass('test');
 }


console.log(NewPArr); 
console.log(OldPArr);

.elements {
  display: block;
}

.item {
  width: 250px;
  height: 50px;
}
.title {
  display:block;
  font-weight: bold;
}

.price_old {
  text-decoration: line-through;
}

.price_new {
  font-weight: bold;
}

.test {
  color: red;
}

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div >

<div >
<span >Title 1</span>
<span >14.99</span>
<span >14.99</span>
</div>

<div >
<span >Title 2</span>
<span >0</span>
<span >9.99</span>
</div>

<div >
<span >Title 3</span>
<span >12.99</span>
<span >14.99</span>
</div>

<div >
<span >Title 4</span>
<span >18.99</span>
<span >14.99</span>
</div>

<div >
<span >Title 5</span>
<span >10.99</span>
<span >10.99</span>
</div>

<div >
<span >Title 6</span>
<span >9.99</span>
<span >9.99</span>
</div>

</div>

https://jsfiddle.net/Robertzoone/sp5h1b96/

CodePudding user response：

No need for arrays ,Working with data- attribute will make it much easier <div data-price_new="" data-price_old="">

$(document).ready(function(){
  $('.item').each(function(){
    let $this = $(this),
        price_old =  $this.data('price_old'),
        price_new =  $this.data('price_new');

    if(price_old > price_new){
      console.log($this.find('.title').text() '--- Old is Bigger');
    }else if(price_old === price_new){
      console.log($this.find('.title').text() '--- Equal');
    }else{
      console.log($this.find('.title').text() '--- New is Bigger');
    }
    
  });
});

.elements {
  display: block;
}

.item {
  width: 250px;
  height: 50px;
}
.title {
  display:block;
  font-weight: bold;
}

.price_old {
  text-decoration: line-through;
}

.price_new {
  font-weight: bold;
}

.test {
  color: red;
}

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div >

<div  data-price_old="14.99" data-price_new="14.99">
<span >Title 1</span>
<span >14.99</span>
<span >14.99</span>
</div>

<div  data-price_old="0" data-price_new="9.99">>
<span >Title 2</span>
<span >0</span>
<span >9.99</span>
</div>

<div  data-price_old="12.99" data-price_new="14.99">
<span >Title 3</span>
<span >12.99</span>
<span >14.99</span>
</div>

<div  data-price_old="18.99" data-price_new="14.99">
<span >Title 4</span>
<span >18.99</span>
<span >14.99</span>
</div>

<div  data-price_old="10.99" data-price_new="10.99">
<span >Title 5</span>
<span >10.99</span>
<span >10.99</span>
</div>

<div  data-price_old="9.99" data-price_new="9.99">
<span >Title 6</span>
<span >9.99</span>
<span >9.99</span>
</div>

</div>

Then ..You can easily get the price_old , price_new element by using

let price_old_element = $this.find('.price_old'),
    price_new_element = $this.find('.price_new');
// use it like this
price_old_element.hide();
price_new_element.addClass('test');

CodePudding user response：

To compare 2 arrays you have to check each and every element in the array:

 var NewPArr = [];
    var NewP = $('.item .price_new').each(function() {  
        NewPArr.push($(this).text());
    });
    
    var OldPArr = [];
    var OldP = $('.item .price_old').each(function() {  
        OldPArr.push($(this).text());
    });

    
    function compareArrays(a1,a2){
       if(!a1 instanceof Array || !a2 instanceof Array) return false;
       if(a1.length != a2.length) return false;
       for(let i = 0; i<a1.length;i  ){
          // Check for 2d array
          if(a1[i] instanceof Array){
            if(a2[i] instanceof Array){
                for(let j = 0; j<a1[i].length;j  ){
                    if(a1[i][j]!=a2[i][j]){
                        return false;
                    }
                }
            }else{
              return false;
             }
          }else{
            if(a1[i]!=a2[i]){
                return false;
            }
          }
       }
       return true;
     }

     if (compareArrays(OldPArr,NewPArr)) {
    console.log('it works');
     //   $('.item .price_old').hide();
        $('.item .price_old').addClass('test');
     }
    
    
    console.log(NewPArr); 
    console.log(OldPArr);

Also to compare the prices you can loop through each and every element and compare the values of OldPArr and NewPArr.