CODEWITHSUNDEEP
javascriptjquery
FreddyJones
FreddyJones

Reputation: 33

jQuery run function only in a div that has anoher div with specific class

Have code for example:

<div class="row">

<div class="sblock4">
<h4>Product 1</h4>
  <div class="available">product available</div>
  <div class="quckorder-btn">Quick order</div>
</div>

<div class="sblock4">
<h4>Product 2</h4>
  <div class="available">product available</div>
  <div class="quckorder-btn">Quick order</div>
</div>

<div class="sblock4">
<h4>Product 3</h4>
  <div class="not_available">out of stock</div>
  <div class="quckorder-btn">Quick order</div>
</div>

</div>

Need to hide "quick order" button if parent div has inner div with class "not_available"

tried some JavaScript:

<script type="text/javascript">
  jQuery(document).ready(function(){
    if(jQuery('div').hasClass('not_available')){
      jQuery('.quckorder-btn').css('display', 'none');
    }
  });  
</script>

Another example JavaScript:

<script type="text/javascript">
  jQuery(document).ready(function(){
if (jQuery('.sblock4:contains("out of stock")')) {
    jQuery(".quckorder-btn").addClass("hide-button");
}
  });  
</script>

But it or don't work at all, or work for all divs with class .quckorder-btn. Need run function only in a div that has another div with class "not_available"

Appreciate any help. Thanks

Upvotes: 2

Views: 51

Answers (4)

ribosed
ribosed

Reputation: 128

$( ".sblock4" ).each(function( index ) {
 var stock = $(this).find(".quckorder-btn").prev();
if ($(stock).hasClass("not_available")) {
stock.next().hide();
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">

<div class="sblock4">
<h4>Product 1</h4>
  <div class="available">product available</div>
  <div class="quckorder-btn">Quick order</div>
</div>

<div class="sblock4">
<h4>Product 2</h4>
  <div class="available">product available</div>
  <div class="quckorder-btn">Quick order</div>
</div>

<div class="sblock4">
<h4>Product 3</h4>
  <div class="not_available">out of stock</div>
  <div class="quckorder-btn">Quick order</div>
</div>

</div>

Upvotes: 0

isherwood
isherwood

Reputation: 61063

jQuery(document).ready(function() {
  jQuery('.not_available').siblings('.quckorder-btn').hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="row">
  <div class="sblock4">
    <h4>Product 1</h4>
    <div class="available">product available</div>
    <div class="quckorder-btn">Quick order</div>
  </div>

  <div class="sblock4">
    <h4>Product 2</h4>
    <div class="available">product available</div>
    <div class="quckorder-btn">Quick order</div>
  </div>

  <div class="sblock4">
    <h4>Product 3</h4>
    <div class="not_available">out of stock</div>
    <div class="quckorder-btn">Quick order</div>
  </div>
</div>

Upvotes: 1

ikiK
ikiK

Reputation: 6532

For each button, get parent, check if it has .not_available // do stuff

document.querySelectorAll(".quckorder-btn").forEach(btn => {
  btn.parentElement.querySelector('.not_available') ? btn.style.display = "none" : btn
})
<div class="row">

  <div class="sblock4">
    <h4>Product 1</h4>
    <div class="available">product available</div>
    <div class="quckorder-btn">Quick order</div>
  </div>

  <div class="sblock4">
    <h4>Product 2</h4>
    <div class="available">product available</div>
    <div class="quckorder-btn">Quick order</div>
  </div>

  <div class="sblock4">
    <h4>Product 3</h4>
    <div class="not_available">out of stock</div>
    <div class="quckorder-btn">Quick order</div>
  </div>

</div>

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337560

To achieve your goal you could use the :has() method. In addition you need to use find() from the elements returned by :has() so that the class is only added to its children, not all .quckorder-btn elements. Try this:

jQuery($ => {
  $('.sblock4:has(.not_available)').find('.quckorder-btn').addClass("hide-button");
});
.hide-button {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <div class="sblock4">
    <h4>Product 1</h4>
    <div class="available">product available</div>
    <div class="quckorder-btn">Quick order</div>
  </div>
  <div class="sblock4">
    <h4>Product 2</h4>
    <div class="available">product available</div>
    <div class="quckorder-btn">Quick order</div>
  </div>
  <div class="sblock4">
    <h4>Product 3</h4>
    <div class="not_available">out of stock</div>
    <div class="quckorder-btn">Quick order</div>
  </div>
</div>

As an aside to this, I would suggest that, for something as business critical as hiding an 'order' button on out of stock inventory, it would be better to do this server side. Not least because it's more secure and avoids issues where users have JS disabled and therefore still see the button, but also because it avoids the FOUC as the DOM loads.

Upvotes: 1

Related Questions