jQuery target selector attribute with filter value and add new class

Question

I can't find specific post regarding this issue.

Basically, what I'm trying to achieve is to hide the Compare text if the data-product-id is less than someValue

After some searching, this is what I came up with. There is no error but the code just won't do anything. I'm sure my code is wrong.

Can someone explain to me what wrong with my code and it'll be helpful if you guys include/explain the correct way to do it.

$("a[data-product-id]").filter(function() {
    return parseInt($(this).attr("data-product-id")) < 99335;
    $('.show').addClass('hide');
});

.hide {
  display: none !important
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="#" class="button" data-product-id="99336" rel="nofollow"><p class="show">Compare</p></a>
<a href="#" class="button" data-product-id="99335" rel="nofollow"><p class="show">Compare</p></a>
<a href="#" class="button" data-product-id="99334" rel="nofollow"><p class="show">Compare</p></a>
<a href="#" class="button" data-product-id="99333" rel="nofollow"><p class="show">Compare</p></a>

Answer 1

There are three problems:

• First, you are calling return, and no code after the return statement will execute (meaning $('.show').addClass('hide') will never get called at all).
• You're not actually running a conditional check on the data-product-id value at all; you're simply returning it. Wrap this line in an if conditional instead of using return.
• Your final problem is that you simply call $('.show').addClass('hide'). This will hide all of the .show elements if any of the parents meet the condition. To correct this, you should make use of .find() with $(this).find('.show').

Here's a working example:

$("a[data-product-id]").filter(function() {
  if (parseInt($(this).attr("data-product-id")) < 99335) {
    $(this).find('.show').addClass('hide');
  }
});

.hide {
  display: none !important
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="#" class="button" data-product-id="99336" rel="nofollow">
  <p class="show">Compare</p>
</a>
<a href="#" class="button" data-product-id="99335" rel="nofollow">
  <p class="show">Compare</p>
</a>
<a href="#" class="button" data-product-id="99334" rel="nofollow">
  <p class="show">Compare</p>
</a>
<a href="#" class="button" data-product-id="99333" rel="nofollow">
  <p class="show">Compare</p>
</a>

Answer 2

There were two problems:

• After return statement, there is no execution of the code.
• Also, you need to catch the current a tag to hide.

Have a look, I have made a demo below

$("a[data-product-id]").filter(function() {
    if( parseInt($(this).attr("data-product-id")) < 99335){
    $(this).removeClass('show').addClass('hide');}
});

.hide {
  display: none !important
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="#" class="button" data-product-id="99336" rel="nofollow"><p class="show">Compare</p></a>
<a href="#" class="button" data-product-id="99335" rel="nofollow"><p class="show">Compare</p></a>
<a href="#" class="button" data-product-id="99334" rel="nofollow"><p class="show">Compare</p></a>
<a href="#" class="button" data-product-id="99333" rel="nofollow"><p class="show">Compare</p></a>