通过标签获取并添加标签

时间:2019-03-21 14:26:02

标签: jquery

我目前正在使用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。如何在标签中和价格之前捕获价格以添加标签(如“价格”)并在标签中和价格之前捕获价格以附加标签“实际价格”?

2 个答案:

答案 0 :(得分:3)

在内容前使用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>

答案 1 :(得分: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>