CODEWITHSUNDEEP
javascriptjquery
SUN
SUN

Reputation: 973

Hide element with jquery if specific values found inside element

I have page where there are dynamic section is getting created. By taking it's class reference If in any section it finds value None then next div which is placed should get hide. I have below kind of structure.

$(document).ready(function() {
  jQuery(".product-tile").each(function() {
    var tileType = jQuery(this).find("h3").text();
    if (tileType == "None") {
      $(this).child("div").hide();
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product-tile">
  <h3>Health</h3>
  <div><i>i Icon</i></div>
</div>

<div class="product-tile">
  <h3>Wealth</h3>
  <div><i>i Icon</i></div>
</div>

<div class="product-tile">
  <h3>None</h3>
  <div><i>i Icon</i></div>
</div>

<div class="product-tile">
  <h3>Others</h3>
  <div><i>i Icon</i></div>
</div>

So 3rd section has <h3> which has None so it's next div should get hidden.

Upvotes: 0

Views: 53

Answers (3)

Therichpost
Therichpost

Reputation: 1815

Here you can check simple and easy:

 $(document).ready(function() {
  $(".product-tile").each(function() {
    var tileType = jQuery(this).find("h3").text();
     if (tileType == "None") {
      $(this).find("div").hide();
     }
  });
});

Upvotes: 0

Hanif
Hanif

Reputation: 3795

According your markup structure you can achieve it by single line code:

$(".product-tile h3:contains('None')").next('div').hide();

Upvotes: 1

Nikhil Aggarwal
Nikhil Aggarwal

Reputation: 28455

Update from

$(this).child("div").hide();

to

$(this).children("div").hide();


$(document).ready(function () {
jQuery(".product-tile").each(function(){
        var tileType = jQuery(this).find("h3").text();
        if (tileType == "None"){
            $(this).children("div").hide();
        }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product-tile">
    <h3>Health</h3>
    <div><i>i Icon</i></div>
</div>

<div class="product-tile">
    <h3>Wealth</h3>
    <div><i>i Icon</i></div>
</div>

<div class="product-tile">
    <h3>None</h3>
    <div><i>i Icon</i></div>
</div>

<div class="product-tile">
    <h3>Others</h3>
    <div><i>i Icon</i></div>
</div>

For reference, jQuery.children

Upvotes: 2

Related Questions