Alternate color on list item

[Manish Kumar Singh]

Hi All,
I have a list item, which is generated dynamically.
I want alternate color on that like
red
white
red
white
red
white

Can You please tell me how can I achieve this.
I am new to Appery.io

[Evgene Karachevtsev]

Hello Manish,

Could you please clarify did you try to use CSS of JS to make that?

[Manish Kumar Singh]

Hi Evgene,

Thanks for reply.

Is it possible with JS ?

Here is the snapshot of my screen.

[Serhii Kulibaba]

Hello Manish,

Sure, you can use JS:

$("[name=mobilelistName] li:odd a").css('color', 'red');

here mobilelistName - name of the list component

[Manish Kumar Singh]

I am trying this code on page load event but it is not working

$("[name=mobilelistName] li:odd a").css('color', 'red');

[She]

try it on page show

[She]

and make sure you have a css for the color:
for example:
code
.blue-highlight {
background-color: #0C91FF !important;
color: white !important;
}

.blue-highlight:hover {
background-color: #0A70FF !important;
}

.red-highlight {
background-color: #FF3205 !important;
color: white !important;
}

.red-highlight:hover {
background-color: #FF0800 !important;
}/code

[John Chaudhry]

Hi,

I am trying this as well on a dynamic list. It doesn't work. I've taken Sergiy's advice above and have put in the following code upon Page Show:

$("[name=list_of_offers] li:odd a").css('background-color','#9F9DC1');
$("[name=list_of_offers] li:odd a").css('color','#4D4A85');
$("[name=list_of_offers] li:even a").css('background-color','#4D4A85');
$("[name=list_of_offers] li:even a").css('color','#9F9DC1');

This works nicely on a static list but not a dynamic one where the items are drawn from a database.

Advice will be appreciated.

[John Chaudhry]

Seems it doesn't work if you have labels in the items list, which I do. The labels loses the css settings.

Anyway to get around this?

[Serhii Kulibaba]

Hello John,

You can add that JS code to the mapping for each list item, or:
-make that list invisible
-run the service
-run that JS code
-set the list "visible"