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

Question

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 class="elements">

<div class="item">
<span class="title">Title 1</span>
<span class="price_old">14.99</span>
<span class="price_new">14.99</span>
</div>

<div class="item">
<span class="title">Title 2</span>
<span class="price_old">0</span>
<span class="price_new">9.99</span>
</div>

<div class="item">
<span class="title">Title 3</span>
<span class="price_old">12.99</span>
<span class="price_new">14.99</span>
</div>

<div class="item">
<span class="title">Title 4</span>
<span class="price_old">18.99</span>
<span class="price_new">14.99</span>
</div>

<div class="item">
<span class="title">Title 5</span>
<span class="price_old">10.99</span>
<span class="price_new">10.99</span>
</div>

<div class="item">
<span class="title">Title 6</span>
<span class="price_old">9.99</span>
<span class="price_new">9.99</span>
</div>

</div>

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

Answer 1

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.