Add javascript condition inside text variable

Question

I have code working fine but I wanna simplify:

<script type="text/javascript">

   function RenderPager(items) {

      for (var i = 0; i < items.length; i++) {

         var li = "<li";

         if(i == 0){
            li += " class='first'";
         }

         li +=">" + i + "</li>";

         // do something else
      }
   }
</script>

I would like to have condition inline something like this:

   for (var i = 0; i < items.length; i++) {

       var li = "<li" + if(i == 0){ li += " class='first'" }; + ">" + i + "</li>";

       // do something else
   }

But this is not working and I tried everything but I don't know how to combine javascript condition in text variable. Is it possible?

p.s.w.g · Accepted Answer · 2014-01-03 12:55:00Z

6

You can use the conditional operator (?..:), also known as the ternary operator:

var li = "<li" + (i == 0 ? " class='first'" : "") + ">" + i + "</li>";

Also note, this could probably also be done using a little CSS with the :fist-child pseudo-class, but it's not supported by older versions of IE. See this compatibility chart:

li:first-child {
    /* applies only to the first <li> element in a list */
}

edited Jan 3, 2014 at 12:55

answered Jan 3, 2014 at 12:43

p.s.w.g

150k31 gold badges307 silver badges339 bronze badges

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

1 Comment

KooiInc Over a year ago

Alternatively this shorter version would work also (!i && ' class="first"' || '').

Collectives™ on Stack Overflow

Add javascript condition inside text variable

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related