Dynamically generate image source using jQuery

Question

I have this code that somebody helped me with here, it basically converts select options to div elements and displays them with an image alongside them.

 $('#property_types option').slice(1).each(
function(){
    var text = $(this).text(),
        outputTo = $('#output'),
        div = $('<div />').text(text),
        img = $('<img />', {'src' : text}).prependTo(div);
    div.appendTo(outputTo);
});

right now, the output is as follows:

 <div><img src="Apartment" /> Apartment</div>
 <div><img src="Building" /> Building</div>
 <div><img src="Land" /> Land</div>
 <div><img src="Office" /> Office</div>

I want to dynamically adjust the src as well.

to make it like:

 <div><img src="images/Apartment.png" /> Apartment</div>
 <div><img src="images/Building.png" /> Building</div>
 <div><img src="images/Land.png" /> Land</div>
 <div><img src="images/Office.png" /> Office</div>

use img.attr('href', 'source');

Rnk Jangir
– Rnk Jangir

2012-08-16 12:32:35 +00:00
Commented Aug 16, 2012 at 12:32 — Rnk Jangir
– Rnk Jangir, Commented Aug 16, 2012 at 12:32

Mihai Iorga · Accepted Answer · 2012-08-16 12:40:23Z

3

add text to src

$('#property_types option').slice(1).each(
function(){
    var text = $(this).text(),
        outputTo = $('#output'),
        div = $('<div />').text(text),
        img = $('<img />', {'src' : 'images/'+text+'.png'}).prependTo(div);
    div.appendTo(outputTo);
});

and

$('#property_types option').slice(1).each(
function(){
    var text = $(this).text(),
        outputTo = $('#output'),
        div = $('<div />').text(text),
        href = $('<a />', {'href' : '#', 'onclick' : 'go'+text+'();'}).prependTo(div),
        img = $('<img />', {'src' : 'images/'+text+'.png'}).prependTo(href);
    div.appendTo(outputTo);
});

edited Aug 16, 2012 at 12:40

answered Aug 16, 2012 at 12:32

Mihai Iorga

39.8k17 gold badges109 silver badges109 bronze badges

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

3 Comments

Claudio Delgado Over a year ago

Works like a charm! Thanks a lot! What if I want to add a unique link to each entry? will this break it? <div><a href="#" onclick="goApartment()"><img src="images/Apartment.png" /> Apartment</a></div>

Mihai Iorga Over a year ago

you should add it before img, and img prepend to href

Claudio Delgado Over a year ago

Awesome! This took me hours and I couldn't figure out even the image part! You fixed both the problems, can't thank you enough!

Ram · Accepted Answer · 2012-08-16 12:42:29Z

2

Try this:

 $('#property_types option').slice(1).each(function(){
      var text = $(this).text(),
          outputTo = $('#output'),
          div = $('<div />').text(text),
          img = $('<img />', {'src' : 'images/'+text+'.png'}).prependTo(div);
      div.appendTo(outputTo);
 });

edited Aug 16, 2012 at 12:42

answered Aug 16, 2012 at 12:32

Ram

145k16 gold badges174 silver badges201 bronze badges

2 Comments

Matthijs Bierman Over a year ago

Why are you mixing double and single quotes in the src attribute?

Matthijs Bierman Over a year ago

No, they're both allowed. It just makes it harder to read the code if you're inconsistent.

Rnk Jangir · Accepted Answer · 2012-08-16 12:44:08Z

1

try this

$(document).ready(function() {

    var source = 'http://upload.wikimedia.org/wikipedia/en/thumb/e/e9/Ruby_on_Rails.svg/150px-Ruby_on_Rails.svg.png'
    outputTo = $('#output');
    var div = $('<div />').text('sdfsdfdsf');
    var img = $('<img />').attr('src', source).prependTo(div);
    div.appendTo(outputTo);
});

answered Aug 16, 2012 at 12:44

Rnk Jangir

7417 silver badges23 bronze badges

Collectives™ on Stack Overflow

Dynamically generate image source using jQuery

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related