jQuery仅在具有多个具有特定类的div的div中运行函数

Question

例如：

<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>

如果父div具有类为“not_available”的内部div,则需要隐藏“快速订购”按钮

尝试了一些JavaScript：

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

另一个JavaScript示例：

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

但是它或者根本不起作用，或者对所有具有class.quckorder-btn的div都起作用。只需要在一个div中运行函数，该div中没有一个div具有类“not_available”

请求任何帮助。谢谢

Answer 1

null

jQuery(document).ready(function() {
  jQuery('.not_available').siblings('.quckorder-btn').hide();
});

html prettyprint-override"><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>

Answer 2

为了实现您的目标，可以使用:has()方法。此外，您需要从:has()返回的元素中使用find()，以便该类只添加到其子类中，而不是添加到所有.quckorder-btn元素中。试试看：

null

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>