インラインスタイルを追加してテキスト行を追加するにはどうすればいいですか？

Question

私はクラス「chicken」を持つdivがたくさんあります。これらのインライン背景画像スタイルはそれぞれ固有のインライン背景画像スタイルが適用されています。すぐ.JPGが終了する前に、BGの画像に「@ 2xの」 - そう例のようになります - div要素は次のようになります。

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

そして、私はそれを作るために「2X @」を追加できるようにしたいと思いますなる：

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

注：私はdiv要素の負荷を持っているので、画像の名前はALWAですys異なる...

<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>

これは効果的に機能します。