jquery检查父元素中是否包含特定文本，如果是，则在特定预先存在的子元素之后添加子元素

Question

我正在处理一个具有产品价格、库存状态等的产品框。该产品框在父元素和每个子元素中都有多个子元素，它们是一个具有 span 元素的子子元素文本。 我不确定我需要什么 jquery 代码或 javascript 代码来指定条件，如果此产品框不包含其中的产品状态，则在子元素价格容器之后添加带有文本的新子元素

到目前为止，我尝试了 .has .find 和 :contains ，但它们都选择了所有具有这些元素/Id/类条件的产品框并应用它，即使我指定只有那些没有此现有文本的产品才应该应用这个带有文本的新元素。

我正在使用示例的一般格式：

    <div class="product-box-container">
        <h5 class="product-title">
           <a class="product-name">This Watch Name</a>
        </h5>
        <p class="product-id">ABCD-123</p>
        <div class="price-container">
          <span class="product-price">$29.99</span>
        <div class="availability-status">
          <span class="product-status">In Stock</span>
        </div>
        <div class="view-product">
          <a><span>View Product</span></a>
        </div>
    </div>

注意：我在一页内处理多个产品框，其中很多具有​​相同的类/Id 名称。 我专注于那些没有产品状态的产品并添加到它们中。 区分它们的唯一方法是识别产品框容器元素中的文本，并使用它来将特定条件应用于具有特定文本的某些框。

最终结果

解决方案前无产品状态的产品盒：

        <div class="product-box-container">
            <h5 class="product-title">
               <a class="product-name">This Watch Name</a>
            </h5>
            <p class="product-id">ABCD-123</p>
            <div class="price-container">
              <span class="product-price">$29.99</span>
            </div>
            <div class="view-product">
              <a><span>View Product</span></a>
            </div>
        </div>

添加新子元素的产品框：

        <div class="product-box-container">
            <h5 class="product-title">
               <a class="product-name">This Watch Name</a>
            </h5>
            <p class="product-id">ABCD-123</p>
            <div class="price-container">
              <span class="product-price">$29.99</span>
            </div>
            <div class="availability-status">
              <span class="product-status">Custom Order</span>
            </div>
            <div class="view-product">
              <a><span>View Product</span></a>
            </div>
        </div>

#1 方法尝试：

/*First i have to make sure it only applies this code to a web page that has view product button/class cause only the pages that have product boxes has view product button/class*/
if ($('span:contains("View Product")').length >0) {
  /*trying to find specific product boxes that do not have product-status by 
  using its product-id text*/
  if ($('div.product-box-container').has('p:contains("ABCD-123")').length >0){
    $('div.price-container').after('<div class="availability-status"><span class="product-status">Custom Order</span></div>');
  }
}

#2 方法尝试

/*specifying to apply only to web pages with view product*/
if ($('span:contains("View Product")').length >0) {
  /*applying the NEW child element first to everything*/
  $('div.price-container').after('<div class="availability-status"><span class="product-status">Custom Order</span></div>');
  /*then deleting the NEW child element from any product boxes that has the In 
  Stock text within it*/
  if ($('div.product-box-container').has('span:contains("In Stock")').length >0) {
    $('div.availability-status').css('display','none');
  }
}

Answer 1

1. 找到所有的盒子
2. 过滤掉具有可用性状态的那些
   1. 找到嵌套在剩余框中的视图产品
   2. 在查看产品前插入自定义html

 $('.product-box-container') .filter(function(){ return $(this).find('.availability-status').length < 1; }) .find('.view-product') .before(` <div class="availability-status"> <span class="product-status">Custom Order</span> </div> `);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="product-box-container"> <h5 class="product-title"> <a class="product-name">This Watch Name</a> </h5> <p class="product-id">ABCD-123</p> <div class="price-container"> <span class="product-price">$29.99</span> </div> <div class="view-product"> <a><span>View Product</span></a> </div> </div> <div class="product-box-container"> <h5 class="product-title"> <a class="product-name">This Watch Name</a> </h5> <p class="product-id">ABCD-123</p> <div class="price-container"> <span class="product-price">$29.99</span> </div> <div class="availability-status"> <span class="product-status">In Stock</span> </div> <div class="view-product"> <a><span>View Product</span></a> </div> </div>