JQuery selector for inline style property

Question

I would like to use a jquery to select the following span:

<span id="RequiredFieldValidator1" class="validationerror" style="color: Red; display: none;">*</span>

But not select the following span which differs from the original in that the style attribute has a display property whose value is inline instead of none.

<span id="RequiredFieldValidator2" class="validationerror" style="color: Red; display: inline;">*</span>

I am aware inline styles are evil but an asp.net web forms validator control is generating it and doing a lot of good as well as evil.

Can this be done using jquery selectors? I'm new to jquery.

Answer 1

Try something like this:

$('.validationerror:hidden')

Answer 2

$("span[style*=inline]")

will select all span elements with the style attribute which has the value "inline" in it somewhere.

Answer 3

embed the styles inside the classes and you have 2 class the use JQuery selector

$(".<ClassName>")

Answer 4

here is an advise for selecting server side controls too

document.getElementById("<%=txtFirstName.ClientID %>");

or

$("#'<%=txtFirstName.ClientID %>'");

or

$("[id$='_txtFirstName']");

Answer 5

I do something like this to add\remove an error style to the parent of the validation error control to highlight the control that caused the error and the validation message.

$('input').change(function() {
  $(".validationError[style*=hidden]").parent().removeClass("error");
  $(".validationError[style*=visible]").parent().addClass("error");
});