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

Question

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

Rory McCrossan · Accepted Answer · 2021-03-11 14:52:04Z

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.

isherwood · Accepted Answer · 2021-03-11 14:54:11Z

1

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>

answered Mar 11, 2021 at 14:54

isherwood

61.4k16 gold badges122 silver badges173 bronze badges

Comments

ikiK · Accepted Answer · 2021-03-11 14:54:06Z

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>

ribosed · Accepted Answer · 2021-03-11 16:15:11Z

0

$( ".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>

edited Mar 11, 2021 at 16:15

answered Mar 11, 2021 at 14:56

ribosed

1281 silver badge13 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related