Update div string contents using Jquery

Question

I have a div that exists only in memory that may contain zero or more images. I'm trying the change the src of thouse images using JQuery find, the problem is that even though i manager to set the src of each img the the content of the div remains unchanged.

    function contentWithReplacedImages(divContent){
    console.log(divContent);//I get <div class='editable singleColumnElement'><p>asdasd ad a dasd ad<br/></p><p><img/> <br/></p></div>
    $(divContent).find("img").each(function(index){
        $(this).attr({
            'src':"imgSrc"
        });
        console.log($(this).attr('src'));//I get "imgSrc"
    });

    console.log(divContent); //divContent remains unchanged.

}

It's part of a bigger script, the function is called i promise you that, but this is the only part that is not working. Right now i'm testing it using Firefox scratchpad — Bobby Tables
– Bobby Tables, Commented Mar 20, 2013 at 13:37
Can you improve your formatting and your question a little bit by describing the context for example. That could help us too understand and answer. — fro_oo
– fro_oo, Commented Mar 20, 2013 at 13:37
It doesn't look like you are returning the divContent string; so maybe, the changes you make only exist inside of the contentWithReplacedImages function itself. Try assigning the contents of the divContent to a new variable, and returning that variable to another string variable, ex var myNewString = contentWithReplacedImages(divContent); — user1477388
– user1477388, Commented Mar 20, 2013 at 13:38
You're creating a new element with the contents of divContent, not doing a search and replace on the string itself. — Reinstate Monica Cellio
– Reinstate Monica Cellio, Commented Mar 20, 2013 at 13:40
@Archer sorry pretty new to javascript and Jquery could you please elaboreate, i'm watching the console.log(divContent); of my function and it's the same as my input — Bobby Tables
– Bobby Tables, Commented Mar 20, 2013 at 13:44

Blazemonger · Accepted Answer · 2013-03-20 13:48:49Z

5

You've altered $(divContent) (jQuery object), but at the end you're checking the contents of the original divContent (html string).

Since divContent isn't actually part of the DOM, you're not saving your changes anywhere.

Try setting a new variable:

function contentWithReplacedImages(divContent) {
     var $temp = $(divContent); // jQuery object
     $temp.find("img").each(function (i,el) {
         $(el).attr({
             'src': "imgSrc.jpg"
         }); // $temp is modified in place
     });    
     console.log($temp.html()); // displays the modified string 
 }

edited Mar 20, 2013 at 13:48

answered Mar 20, 2013 at 13:43

Blazemonger

93.3k28 gold badges147 silver badges181 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Reinstate Monica Cellio · Accepted Answer · 2013-03-20 13:43:34Z

2

This creates a new element...

$(divContent)

You then find the images within that new element and change the src attribute. You have not at any point changed divContent itself.

Try this...

function contentWithReplacedImages(divContent){
    console.log(divContent);
    var $divContent = $(divContent);
    $divContent.find("img").each(function(index){
        $(this).attr({
            'src':"imgSrc"
        });
        console.log($(this).attr('src'));
    });
    divContent = $divContent.html();
    console.log(divContent);
}

contentWithReplacedImages("<div class='editable singleColumnElement'><p>asdasd ad a dasd ad<br/></p><p><img/> <br/></p></div>");

answered Mar 20, 2013 at 13:43

Reinstate Monica Cellio

26.2k6 gold badges54 silver badges67 bronze badges

1 Comment

Bobby Tables Over a year ago

This worked thank you so much, i'll mark it as the correct answer in a few minutes, can't just yet. Has no idea it creats a new object

Collectives™ on Stack Overflow

Update div string contents using Jquery

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related