jQuery: How to add a string to a css property


Tags: jquery,html,css,background

Problem :

So here is what I'm trying to do. I have some divs with background images name Look-1.jpg - Look-6.jpg. what I need to do is to add -cut to all of them at once so basically change them to Look-6-cut.jpg.

The reason I'm trying to do this is because I have 2 collection of background images and I'm trying to switch them on different screen sizes.

Of course it's possible to do so with css but then I have to do each one of them one by one.

I was wondering if there's a way to achieve this using jQuery.

Thanks

<div class="item active" style="background: url('/assets/img/collection/Look-1.jpg') center center no-repeat;">
    <div class="carousel-caption item-caption">
        <h5 class="text-black">200 TC Cotton Percale Duvet Cover</h5>
        <a href="#" class="link-inline">View Product<i class="fa fa-angle-right"></i></a>
    </div>
</div>


Solution :

$("div").css('background-image',(i,cur)=>cur.replace('.jpg','-cut.jpg'));
$("div").each(function(){
  console.log($(this).css('background-image'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item active" style="background: url('/assets/img/collection/Look-1.jpg') center center no-repeat;"></div>
<div class="item active" style="background: url('/assets/img/collection/Look-2.jpg') center center no-repeat;"></div>
<div class="item active" style="background: url('/assets/img/collection/Look-3.jpg') center center no-repeat;"></div>

Does this work for you? The first line replaces all occurrences of .jpg with -cut.jpg and the second simply prints the new values to prove that.


    CSS Howto..

    css - why my text box is not showing up?

    How do I install SASS with Mean.io?

    How To Display only First Word of H2 Heading With JavaScript or CSS

    Symfony2: How to link CSS to HTML part?

    How do CSS grid systems save time when implementing designs that aren’t grid-based?

    How do I manipulate the same function in javascript for two different classes

    How to Customise the angular material date-picker?

    Is it possible to see how your html & css code would look on a mobile device without actually have a website url?

    Showing/hiding content with jQuery

    How does CSS works under the hood? [closed]

    How can I make a CSS selector for a button with two classes existing in .less?

    how to add space at top of page

    How to position absolute in scrollable area? (Css)

    How to eliminate the margin of div boxes

    How do I change button color on press in bootstrap?

    how to change, in CSS files, src attribute for images dynamically at deploy? (ASP.NET Web Forms)

    how to make a image in div to be dragged just downwards using html5 css jquery animation?

    How to include child div into parent div automatically?

    How to change CSS of a website depending on whether it is being viewed on mobile or computer? [closed]

    How to prevent slider from stretching?

    How to style all the same XSL FO elements? XSL FO like CSS?

    Position relative, how to get rid of dead space?

    How do I make my picture slideshow stay behind my header

    How to make div scroll down with a page once it reaches top of page?

    How to optimize this css code? [closed]

    How to fix error from posting html element and prevent it from running

    How to render CSS and HTML elements back to the Client's Browser from Form-POST acction and JavaScript?

    How to make the whole div clickable

    Generated web font doesn't show dots above Ü

    How can I move this box in this HTML/CSS file?