If statement with jquery

Question

I'm trying to figure out how I can do an if statement with this code. The if statement is supposed to determine whether or not the li gets a class name or not depending on if its read or not. What determines it is the data[x][messageRead] == 0 or not but not sure how to do this inside of this append.

$.each(data, function(x)
{
    $('.mail').append('<li><a href=""><strong>Received: '+data[x]['dateSent']+'</strong><small>'+data[x]['subject']+'</small><small>From: '+data[x]['firstName']+' '+data[x]['lastName']+'</small></a></li>'); 
});

Lots of good solutions here...

AndrewR
– AndrewR

2012-03-20 15:54:38 +00:00
Commented Mar 20, 2012 at 15:54 — AndrewR
– AndrewR, Commented Mar 20, 2012 at 15:54

nicosantangelo · Accepted Answer · 2012-03-20 15:53:43Z

2

You could use the ternary operator ?:

$.each(data, function(x)
{
    $('.mail').append('<li' + (data[x][messageRead] == 0 ? 'class="ClassName"' : '') + '><a href=""><strong>Received: '+data[x]['dateSent']+'</strong><small>'+data[x]['subject']+'</small><small>From: '+data[x]['firstName']+' '+data[x]['lastName']+'</small></a></li>'); 
});

edited Mar 20, 2012 at 15:53

answered Mar 20, 2012 at 15:50

nicosantangelo

13.8k3 gold badges35 silver badges47 bronze badges

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

Comments

trapper · Accepted Answer · 2012-03-20 15:51:04Z

1

Just javascript...

$.each(data, function(x)
{
    if (data[x][messageRead] == 0) {
        $('.mail').append('<li><a href=""><strong>Received: '+data[x]['dateSent']+'</strong><small>'+data[x]['subject']+'</small><small>From: '+data[x]['firstName']+' '+data[x]['lastName']+'</small></a></li>');
    } else {
        $('.mail').append('<li class="read"><a href=""><strong>Received: '+data[x]['dateSent']+'</strong><small>'+data[x]['subject']+'</small><small>From: '+data[x]['firstName']+' '+data[x]['lastName']+'</small></a></li>');
    }
});

You can refactor a bit but principle is like anything else

answered Mar 20, 2012 at 15:51

trapper

12k7 gold badges40 silver badges83 bronze badges

Comments

Bogdan Emil Mariesan · Accepted Answer · 2012-03-20 15:50:33Z

1

For such cases it is advised to use the method .toggleClass() from the jQuery API

http://api.jquery.com/toggleClass/

answered Mar 20, 2012 at 15:50

Bogdan Emil Mariesan

5,6672 gold badges35 silver badges59 bronze badges

Comments

Daff · Accepted Answer · 2012-03-20 15:50:47Z

1

The actual value gets passed to the second value of your callback. Then you create the li element first and then use a strict equality comparison if you should add the class:

$.each(data, function(x, value)
{
    var li = $('<li><a href=""><strong>Received: '+ value.dateSent +'</strong><small>'+ value.subject +'</small><small>From: '+ value.firstName+' '+ value.lastName +'</small></a></li>');
    if(value.messageRead === 0) {
        li.addClass('the-class');
    }
    $('.mail').append(li);
});

answered Mar 20, 2012 at 15:50

Daff

44.4k9 gold badges108 silver badges122 bronze badges

Comments

Simon · Accepted Answer · 2012-03-20 15:51:44Z

1

Try the ternary operator

$.each(data, function(x)
{
    $('.mail').append('<li' + (data[x][messageRead] == 0 ? ' class="yourclass"' : '')><a href=""><strong>Received: '+data[x]['dateSent']+'</strong><small>'+data[x]['subject']+'</small><small>From: '+data[x]['firstName']+' '+data[x]['lastName']+'</small></a></li>'); 
});

Should do the trick.

answered Mar 20, 2012 at 15:51

Simon

5,5131 gold badge36 silver badges47 bronze badges

Comments

MatuDuke · Accepted Answer · 2012-03-20 15:51:55Z

1

You can do something like this:

$.each(data, function(x)
{
    $('.mail').append('<li' + (data[x][messageRead] == 0 ? ' class="myClass"' : '') + '><a href=""><strong>Received: '+data[x]['dateSent']+'</strong><small>'+data[x]['subject']+'</small><small>From: '+data[x]['firstName']+' '+data[x]['lastName']+'</small></a></li>'); 
});

answered Mar 20, 2012 at 15:51

MatuDuke

5,0081 gold badge25 silver badges28 bronze badges

Comments

Reinaldo · Accepted Answer · 2012-03-20 15:53:16Z

1

Do something like this:

$.each(data, function(x)
{
    $('.mail').append('<li class="' + ((data[x][messageRead] == 0)?'read':'unread') + '"><a href=""><strong>Received: '+data[x]['dateSent']+'</strong><small>'+data[x]['subject']+'</small><small>From: '+data[x]['firstName']+' '+data[x]['lastName']+'</small></a></li>'); 
});

Hope it helps!

answered Mar 20, 2012 at 15:53

Reinaldo

4,6863 gold badges26 silver badges24 bronze badges

Comments

AndrewR · Accepted Answer · 2012-03-20 15:53:24Z

1

I believe this would give you what you want.

$.each(data, function(x)
{
    var item = $('<li><a href=""><strong>Received: '+data[x]['dateSent']+'</strong><small>'+data[x]['subject']+'</small><small>From: '+data[x]['firstName']+' '+data[x]['lastName']+'</small></a></li>');
    if(data[x]['messageRead'] == 0){
        item.addClass('new');
    }
    $('.mail').append(item); 
});

answered Mar 20, 2012 at 15:53

AndrewR

6,7681 gold badge26 silver badges38 bronze badges

Comments

Christofer Eliasson · Accepted Answer · 2012-03-20 15:53:56Z

1

You can use the ternary operator, and add the class only if your criteria is met.

For readability I store the class in variable, but it could of course be done within the append as well.

$.each(data, function(x)
{
    var classString = (data[x]['messageRead'] == 0) ? " class=\"read\"" : "";
    $('.mail').append('<li' + classString +'><a href=""><strong>Received: '+data[x]['dateSent']+'</strong><small>'+data[x]['subject']+'</small><small>From: '+data[x]['firstName']+' '+data[x]['lastName']+'</small></a></li>'); 
});

answered Mar 20, 2012 at 15:53

Christofer Eliasson

34k7 gold badges77 silver badges103 bronze badges

Collectives™ on Stack Overflow

If statement with jquery

9 Answers 9

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related