Find a character inside <label> and set class
I am trying to find a way to highlight some required fields in a form. I don't have access to the label settings for this application, so I'd like to try finding a character within the label and change it to be more prominent.
The current label for required fields is set as this example:
<label>First Name *</label>
I would like to find all instances of the asterisk * wit开发者_StackOverflow中文版hin label tags in a page and wrap them inside a CSS class so I can either set color or replace with an image. Is that achievable?
Thank you in advance.
find all labels contain an asterisk, replace the html with your element
$("label:contains('*')").each(function(){
var r = $(this).html().replace('*',','<sup class="conditions">*</sup>');
$(this).html(r);
});
but this could be done much nicer/faster with css:
label.requiredField:after {
content: "*";
color:#f00;
}
/** your HTML would be **/
<label class="requiredField">First Name</label>
/** and renders like: **/
First Name*
more here: http://www.quirksmode.org/css/beforeafter.html
The :contains
selector will give you want you need:
$('label:contains("*")').wrap('<span style="color:red">');
$(label).filter(function () {
return $(this).text().indexOf('*') != -1;
}).each(function () {
$(this).whatEver();
});
精彩评论