How can I insert a variable into a variable string?

Question

I have this code which I need to set a unique title:

var tmpImg = '<img src="/admin/icons/cross.png" title="' + title + '" />';

$(this).find("tr td input").each(function(){
    title = $(this).attr("value");
    $(this).hide().before(tmpImg);
});

What I want to happen, is that each time the each iterates over the <input>, it updates the title value in the tmpImg string. I know I could separate the img HTML like below, although I think this would get messy when I need to reuse the image later down the script.

var tmpImg = '<img src="/admin/icons/cross.png" title="';

$(this).find("tr td input").each(function(){
    title = $(this).attr("value");
    $(this).hide().before(tmpImg + title + '" />');
});

I find it mildly amusing that you spelled the word "variable" 2 different ways – both incorrect – in the question title :-) — Andy E
– Andy E, Commented Jan 23, 2012 at 9:59

Jordan Running · Accepted Answer · 2012-01-23 10:02:26Z

2

These string replacement solutions are nuts. Just make a copy of the element and set the attribute on it directly.

var tmpImg = $( '<img src="/admin/icons/cross.png" />' );

$(this).find( "tr td input" ).each(function() {   
  $(this).hide().before( tmpImg.clone().attr( 'title', this.value ) );
});

answered Jan 23, 2012 at 10:02

Jordan Running

107k18 gold badges193 silver badges189 bronze badges

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

1 Comment

Dan D. Over a year ago

this looks like what i would have put as an answer.

user447356 · Accepted Answer · 2012-01-23 09:56:30Z

2

Change the variable to sort of template:

var tmpImg = '<img src="/admin/icons/cross.png" title="$title" />';

Then replace it with the input value:

$(this).hide().before($(tmpImg.replace("$title", this.value)));

The above has minimal changes to original code, the better jQuery way though is this:

$(this).hide().before($("<img />").attr("src", "/admin/icons/cross.png").attr("title", this.value));

answered Jan 23, 2012 at 9:56

user447356

Comments

Andy E · Accepted Answer · 2012-01-23 10:06:06Z

1

This is how I'd do it, for what it's worth:

$(this).find("tr td input").each(function(){
    $('<img/>', {
        src: "/admin/icons/cross.png",
        title: this.value
    }).insertBefore(this).next().hide();
});

answered Jan 23, 2012 at 10:06

Andy E

346k86 gold badges482 silver badges452 bronze badges

Comments

T.J. Crowder · Accepted Answer · 2012-01-23 09:58:07Z

0

You can put some kind of placeholder token in the string, then use replace:

var TITLE_TOKEN = '%%TITLE%%';
var tmpImg = '<img src="/admin/icons/cross.png" title="' + TITLE_TOKEN + '" />';

$(this).find("tr td input").each(function(){
    $(this).hide().before(tmpImg.replace(TITLE_TOKEN, $(this).attr("value")));
});

Side note: $(this).attr('value') is usually better written this.value or $(this).val().

answered Jan 23, 2012 at 9:58

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Collectives™ on Stack Overflow

How can I insert a variable into a variable string?

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related