How to hide div by value of attribute jQuery

Question

I want to hide divs which has attribute show-value equal to 0. Something like this:

<div class="card-tag card-product-new-tag" show-value="0">NEW</div>//this should be hidden
<div class="card-tag card-product-new-tag" show-value="1">NEW</div>//this should be visible

Html:

<div class="card-product">
     <img class="card-product-img" src="somewhere1">
     <img class="card-product-img2" src="somewhere2">
     <div class="card-tag card-product-new-tag" show-value="0">NEW</div>
     <div class="card-tag card-product-sale-tag" show-value="1">SALE</div>
     <div class="card-tag card-product-popular-tag" show-value="1">POPULAR</div>
     <div class="card-tag card-product-featured-tag" show-value="1">FEATURED</div
     <div class="card-product-name"><a href="">Product Title</a></div>
     <div class="card-product-price">99TL</div>
</div>

<div class="card-product">
     <img class="card-product-img" src="somewhere1">
     <img class="card-product-img2" src="somewhere2">
     <div class="card-tag card-product-new-tag" show-value="1">NEW</div>
     <div class="card-tag card-product-sale-tag" show-value="1">SALE</div>
     <div class="card-tag card-product-popular-tag" show-value="1">POPULAR</div>
     <div class="card-tag card-product-featured-tag" show-value="1">FEATURED</div
     <div class="card-product-name"><a href="">Product Title</a></div>
     <div class="card-product-price">99TL</div>
</div>

jQuery:

if ($(".card-product .card-product-new-tag").attr("show-value") == 0){
        $(".card-product .card-product-new-tag", this).hide();
    }

Dharman · Accepted Answer · 2020-07-31 18:18:13Z

I'm Assuming that you have some common class to the elements which contains attribute show-value.

I am looping through each element and checking whether show-value attribute is 0. If value is zero, then i am hiding that particular element. For better understanding, please check the attached code snippet.

$(".card-tag").each(function(){
  if ($(this).attr('show-value') == 0) {
    $(this).hide();
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="card-product">
     <img class="card-product-img" src="somewhere1">
     <img class="card-product-img2" src="somewhere2">
     <div class="card-tag card-product-new-tag" show-value="0">NEW</div>
     <div class="card-tag card-product-sale-tag" show-value="1">SALE</div>
     <div class="card-tag card-product-popular-tag" show-value="1">POPULAR</div>
     <div class="card-tag card-product-featured-tag" show-value="1">FEATURED</div
     <div class="card-product-name"><a href="">Product Title</a></div>
     <div class="card-product-price">99TL</div>
</div>

<div class="card-product">
     <img class="card-product-img" src="somewhere1">
     <img class="card-product-img2" src="somewhere2">
     <div class="card-tag card-product-new-tag" show-value="1">NEW</div>
     <div class="card-tag card-product-sale-tag" show-value="1">SALE</div>
     <div class="card-tag card-product-popular-tag" show-value="1">POPULAR</div>
     <div class="card-tag card-product-featured-tag" show-value="1">FEATURED</div
     <div class="card-product-name"><a href="">Product Title</a></div>
     <div class="card-product-price">99TL</div>
</div>

Collectives™ on Stack Overflow

How to hide div by value of attribute jQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related