jquery: Getting 'src' from data-url and add the same

Question

I'm new to JavaScript, jQuery and Stack.

I'm trying to get the url with data().url and add the same as src to each img. Here is an example of the HTML.

<ol>
  <li><div class="image"><img data-url="https://lh4.googleusercontent.com/.../s400/image-1.png"/></div></li>
  <li><div class="image"><img data-url="https://lh4.googleusercontent.com/.../s400/image-2.png"/></div></li>
  <li><div class="image"><img data-url="https://lh4.googleusercontent.com/.../s400/image-3.png"/></div></li>
</ol>

How this can be achieved with jquery?

Answer 1

Try this:

$(".image img").each(function(){
    $(this).attr("src" , $(this).data().url );
});

Here is the example: http://jsfiddle.net/42A93/1/

Welcome to SO!

Answer 2

$( '.image img' ).map( function(){
     this.setAttribute('src', this.getAttribute('data-url'));
});

Answer 3

Try

$(".image img").attr('src', function(){
    return $(this).data('url');
})

Answer 4

You could do this :

$('.image img').attr('src', function(){ return $(this).data('url') });