Adding class using jQuery in Foreach loop

Question

I am running jQuery script in foreach loop to add classes in html dynamically.I want to add two different classes on different event status but it adds both the class, the class in the if condition and class in else condition.

Here is my code

<?php foreach( $events as $event ){ 
if ($event->status=='new'){ ?>
jQuery( ".upcoming-events" ).addClass( "new_event" );   
<?php } 
else {
?>
jQuery( ".upcoming-events" ).addClass( "old_event" );
<?php } } ?>

but it adds both the classes in upcoming-events div.

any hint???

you can use hasClass method of jquery to check for class the n remove and add new class — Karthick Kumar
– Karthick Kumar, Commented Jul 3, 2014 at 8:14
That means the $events array has at least one new and one old element. — Ja͢ck
– Ja͢ck, Commented Jul 3, 2014 at 8:20

Mrinmoy Majee · Accepted Answer · 2014-07-03 08:22:24Z

1

Check my code for your answer

<?php foreach( $events as $event ){
if ($event->status=='new'){ ?>
jQuery( ".upcoming-events" ).removeClass( "old_event" );

jQuery( ".upcoming-events" ).addClass( "new_event" );
<?php }
else {
?>
jQuery( ".upcoming-events" ).removeClass( "new_event" );
jQuery( ".upcoming-events" ).addClass( "old_event" );
<?php } } ?>

answered Jul 3, 2014 at 8:22

Mrinmoy Majee

3762 silver badges13 bronze badges

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

Comments

Nebojsa Susic · Accepted Answer · 2014-07-03 08:23:28Z

1

".upcoming-events" selector select all elements with upcoming-events class, so if you have any new event you will add new_event class to ALL elements, not only current one.

You must select elements by id, par example.

answered Jul 3, 2014 at 8:23

Nebojsa Susic

1,2601 gold badge9 silver badges13 bronze badges

Comments

Sathish M · Accepted Answer · 2014-07-03 09:01:55Z

1

You may use Mrinmoy's, but here is more simplyfied,

<?php 
foreach( $events as $event ){
if ($event->status=='new'){ 
?>
jQuery( ".upcoming-events" ).removeClass( "old_event" ).addClass( "new_event" );
<?php 
} else { 
?>
jQuery( ".upcoming-events" ).removeClass( "new_event" ).addClass( "old_event" );
<?php 
} } 
?>

answered Jul 3, 2014 at 9:01

Sathish M

376 bronze badges

Collectives™ on Stack Overflow

Adding class using jQuery in Foreach loop

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related