Change 1 word of an css attribute

Question

I have the following code

    <span style="background-image:url('/product_images/attribute_value_images/78.thumbnail.jpg')" class="thumbnail">&nbsp;</span>

I need to change the word thumbnail for preview, it is possible with jquery?

so far I have this:

    $("li.swatch span.thumbnail").each(function(){
    $(this).css("background-image").replace(/thumbnail/ig, "preview")
    ;
    });

it seems to be working (if I alert() I get the right value) but is not changing in the page.. any ideas where I could look up? thx in advance

Answer 1

Using .css(propertyName) only gets the css rule value of propertyName.

So in your code, your are getting the css, replacing its content, but not updating back the css rule afterwards.

Use the other overload .css(propertyName, value) after obtaining/modifying the css rule to update the rule:

$("li.swatch span.thumbnail").each(function() {

    var $this = $(this),
        // get the css rule and changing it
        css = $this.css("background-image").replace(/thumbnail/ig, "preview");

    // update the css rule
    $this.css('background-image', css );

});

Documentation on .css().