我目前正在使用Wordpress,并且具有以下html代码:
<div class="single-price-wrapper">
<p class="price">
<del><span class="woocommerce-Price-amount amount">989.00 <span class="woocommerce-Price-currencySymbol">лв.</span></span></del>
<ins><span class="woocommerce-Price-amount amount">239.00 <span class="woocommerce-Price-currencySymbol">лв.</span></span></ins>
</p>
</div>
我不能在行上添加或编辑类名或ID。如何在标签中和价格之前捕获价格以添加标签(如“价格”)并在标签中和价格之前捕获价格以附加标签“实际价格”?
答案 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 <span class="woocommerce-Price-currencySymbol">лв.</span></span></del>
<ins><span class="woocommerce-Price-amount amount">239.00 <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 <span class="woocommerce-Price-currencySymbol">лв.</span></span></del>
<ins><span class="woocommerce-Price-amount amount">239.00 <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 <span class="woocommerce-Price-currencySymbol">лв.</span></span></del>
<ins><span class="woocommerce-Price-amount amount">239.00 <span class="woocommerce-Price-currencySymbol">лв.</span></span></ins>
</p>
</div>