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>