If-statement inside jquery Append()

Question

Inside my jquery Append() I wan't to run an IF-statement to include an image on all my objects except on the first one.

Like:

var i = 0;

$('#divDetailsForSelectedInfo').append(
    '<div class="roundedAndBoxShade leftResultObject" id = "' + value.Query.Id + '">'+
    '<div class="leftResultObject_inner">' +
if (i > 0){
   <img src="/img.jpg"/>;
}
'<div>asdf</div>');

The code is generated by Json+Jquery and then it is all appended on a div in my index-file. As far as I've been able to tell through immence google-ing this can't be done, but I might be wrong?

If it is indeed "impossible", could the :first selector in Jquery be used in some cool way?

Wait: where are you incrementing `i`, and *why* would an `id`-based selector return multiple elements? — David Thomas, Oct 15 '12 at 15:08

score 42 · Accepted Answer · answered Oct 15 '12 at 15:18

42

A simpler solution:

var i = 0;
$('#somediv').append(
    'html before' + 
    (i > 0 ? '<img src="/img.jpg"/>': '') +
    'more html'
);

answered Oct 15 '12 at 15:18

Kostia

6,284
1
18
15

score 7 · Answer 2 · answered Oct 15 '12 at 15:02

var i = 0;
var str=''
if (i > 0){
  str =  '<img src="/img.jpg"/>;'
}
$('#divDetailsForSelectedInfo').append(
    '<div class="roundedAndBoxShade leftResultObject" id = "' + value.Query.Id + '">'+
    '<div class="leftResultObject_inner">' +str+'<div>asdf</div>');

David Thomas · Answer 3 · 2012-10-15T15:12:07.027

2

The easiest way I can think of to do this:

$('#divDetailsForSelectedInfo').append(
    function(i) {
        return '<div class="roundedAndBoxShade leftResultObject" id = "' + value.Query.Id + '">' + '<div class="leftResultObject_inner">' + (i > 0 ? '<img src="/img.jpg"/>' : '');
    });

JS Fiddle proof-of-concept.

edited Oct 15 '12 at 15:12

answered Oct 15 '12 at 15:06

David Thomas

249,100
51
377
410

If-statement inside jquery Append()

3 Answers3

Linked