bunnycode bunnycode - 23 days ago 4
jQuery Question

Change color of list items that are not display:none;

I'm trying to achieve something different here, but have simplified my code so that I can learn what I'm doing wrong so bear with me.

I'm using jquery validate to show validation errors above their respective errors fields, as well as at the very top of the screen in list form.

Ultimately what I'm trying to do is get a dynamically numbered list to show based on what errors actually exist (i.e. if there are 12 potential errors but the user only makes 2, the top of the list will show only 2 errors/descriptions (1. [error], 2. [error]) rather than a blank list of 12 errors with only 2 showing, hope that makes sense).

But right now I'm just trying to whittle down the logic to something I can understand, so the above is mostly irrelevant right now.

What I want to happen: on "Continue" button click, the potential but display:none errors will have one action associated with them (in this test case, change their text color to brown and keep them display:none). For the errors that DO show, change their text color to green.

What is wrong with my code? Am I missing an each(), and if so, where would it go? Why is this

if element is display:none do this, else do this
not working? Pardon my ignorance here, and thank you in advance for any help.

<div class="error-message-container error-menu">
<a href="#firstName"><label class="error" for="firstName" generated="true"></label></a>
<a href="#lastName"><label class="error" for="lastName" generated="true"></label></a>
<a href="#dobMonth"><label class="error" for="dobMonth" generated="true"></label></a>

$('.btn-submit-val').on('click', function() {
if($('.error-menu a label').css('display') == 'none') {
} else {

Fiddle: https://jsfiddle.net/DTcHh/25840/


You can use the :visible and :hidden selector

$('.btn-submit-val').on('click', function() {
    $('.error-menu a label:hidden').css("color","brown");
    $('.error-menu a label:visible').css("color","green");