Question

我正在处理一个商品框，该商品框具有产品价格，库存状态等。该商品框在父元素内以及每个子元素内具有多个子元素，它们的子子元素具有带有文本的span元素。我不确定我需要指定哪种jquery代码或javascript代码，如果此产品框内没有包含产品状态，则在该子元素价格容器之后添加带有文本的新子元素 strong>

到目前为止，我尝试.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名称。我专注于那些没有产品状态的产品，并将其添加到产品中。区分它们的唯一方法是识别产品框容器元素中的文本，然后使用该文本将特定条件应用于具有特定文本的某些包装盒。

END RESULT

在解决方案之前没有产品状态的产品框：

        <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. 在查看产品之前插入自定义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>

jQuery检查父元素中是否包含特定文本，如果是，则在特定子元素之前添加子元素

1 个答案: