How to use jquery to set css on a selected list item?

[Tom Mccann]

I have a list that is populated with 4 items. Within each list item I have a label containing a down arrow. I have given this label a css class = 'downControl'

I want to hide the down arrow on the last item in the list. To do this I use jquery in the page load event to set the css on the downControl to display:none. Here is the code:

var lastDown = $(".downControl").last();
lastDown.css("display", "none");

To my surprise it hides the down arrow on ALL 4 list items. I then run another script to give me a count of the number of downControls:

var n = $(".downControl").length;
alert('There are ' + n + ' downControls');

This tells me there is only 1 downControl. I am guessing that the load event can only see the list control BEFORE it is populated with values.

My question: is there another event I can put the code into? I really need to run the script AFTER the page has loaded (and the list has been populated with values) instead of while it is loading. I have tried most of the other events. Is there another solution to this?

Thanks for your help.

[Illya Stepanov]

Hi Tom,

And if you try it on Show event? How it behaves?

[Tom Mccann]

It behaves the same way on Page Show.

[Illya Stepanov]

I think it happens because your iterating the entire class .downControl - so it's applies to all elements in that class.

[Tom Mccann]

Did you see the .last() part of the code? That should select the last element in the selection.

Also, the .length shows that there is 1 element in the selection. If I had to guess what is happening it is that there is 1 item at load time which is then copied and loaded with the values from the database, The problem comes when the script runs. It is running before the list is populated and not after.

[Illya Stepanov]

Hi Tom, can you share a public link to test this?

[Tom Mccann]

I solved it. I looked at the fact that I'm using a data service to return the list values. I then created a second event-action that runs when the data service returns success. In the second event I ran some javascript to set the csss on the last down arrow control. This works because the list is populated at that time.

I'm not sure if this is a bug in appery or not. I would have thought that the 'Load' event would be invoked AFTER the page has been fully populated (including the list). This might be my misinterpretation. However, it does spell the need for an 'After Load' event which signals when the page is fully ready.

[Maryna Brodina]

Hello! Sorry for delay. The problem is that you fill in List with service results and in initial list (which will be taken as template for mapping) you hide element on page Load. So in retrieved items based on this template element will be hidden.

You hide element on service success event and it's correct. Success event is triggered after mapping is done. Here you can find the last element and use it to hide something.