jquery - 如何附加内联样式来添加一行文本

Question

我有大量带有“chicken”类的 div，并且这些都应用了独特的内联背景图像样式，我希望能够在 .jpg 之前将“@2x”添加到 BG 图像中结束 - 所以一个例子是 - div 看起来像这样:

<div class="chicken" style="background-image: url('example.jpg');">

我希望能够添加“@2x”以使其变为:

<div class="chicken" style="background-image: url('example@2x.jpg');">

注意:我有很多 div，因此图像名称总是不同...

例如

<div class="chicken" style="background-image: url('example@2x.jpg');">
<div class="chicken" style="background-image: url('monkey@2x.jpg');">
<div class="chicken" style="background-image: url('nana@2x.jpg');">
<div class="chicken" style="background-image: url('tin@2x.jpg');">
<div class="chicken" style="background-image: url('crisps@2x.jpg');">

因此需要一种方法在每个 div 上的“.jpg”之前添加“@2x”有什么想法吗？

Answer 1

您可以使用.each()这样做:

$('.chicken').each(function () {
  $(this).css('background-image', $(this).css('background-image').replace(".jpg", "@2x.jpg"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="chicken" style="background-image: url('monkey.jpg');"></div>
<div class="chicken" style="background-image: url('donkey.jpg');"></div>
<div class="chicken" style="background-image: url('kitten.jpg');"></div>
<div class="chicken" style="background-image: url('lollol.jpg');"></div>

这有效地起作用: