Question

我目前正在使用Wordpress，并且具有以下html代码：

<div class="single-price-wrapper">
     <p class="price">
        <del><span class="woocommerce-Price-amount amount">989.00&nbsp;<span class="woocommerce-Price-currencySymbol">лв.</span></span></del> 
        <ins><span class="woocommerce-Price-amount amount">239.00&nbsp;<span class="woocommerce-Price-currencySymbol">лв.</span></span></ins>
     </p>
</div>

我不能在行上添加或编辑类名或ID。如何在标签中和价格之前捕获价格以添加标签（如“价格”）并在标签中和价格之前捕获价格以附加标签“实际价格”？

Answer 1

在内容前使用CSS规则

.price > * > span:before {
  content: "Price "
}

<div class="single-price-wrapper">
     <p class="price">
        <del><span class="woocommerce-Price-amount amount">989.00&nbsp;<span class="woocommerce-Price-currencySymbol">лв.</span></span></del> 
        <ins><span class="woocommerce-Price-amount amount">239.00&nbsp;<span class="woocommerce-Price-currencySymbol">лв.</span></span></ins>
     </p>
</div>

如果要使用JavaScript注入

$(".price > * > span").before("<label>Price: </label>")

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="single-price-wrapper">
     <p class="price">
        <del><span class="woocommerce-Price-amount amount">989.00&nbsp;<span class="woocommerce-Price-currencySymbol">лв.</span></span></del> 
        <ins><span class="woocommerce-Price-amount amount">239.00&nbsp;<span class="woocommerce-Price-currencySymbol">лв.</span></span></ins>
     </p>
</div>

Answer 2

这是一个javascript / jQuery解决方案：

$(document).ready(() => {
  // I guess you have many products or whatever it is
  $('p.price').each((i, e) => {
    // .before(...) is OK too.
    $(e).find('del').wrap(
      $('<label>').text('Price: ')
    );
    
    $(e).find('ins').wrap(
      $('<label>').text('Real price: ')
    );
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="single-price-wrapper">
     <p class="price">
        <del><span class="woocommerce-Price-amount amount">989.00&nbsp;<span class="woocommerce-Price-currencySymbol">лв.</span></span></del> 
        <ins><span class="woocommerce-Price-amount amount">239.00&nbsp;<span class="woocommerce-Price-currencySymbol">лв.</span></span></ins>
     </p>
</div>

通过标签获取并添加标签

2 个答案: