.labels()

Categories: Method Overrides | Methods | Utilities

.labels()Returns: jQuery

Description: Finds all label elements associated with the first selected element.

  • version added: 1.12.labels()

    • This method does not accept any arguments.

This can be used to find all the <label> elements associated with an <input> element. The association can be through nesting, where the label is an ancestor of the input, or through the for attribute on the label, pointing at the id attribute of the input. If no labels are associated with the given element, an empty jQuery object is returned.

This methods mimics the native labels property, which isn't supported in all browsers. In addition, this method also works for document fragments.

Example:

Highlight all labels of the input element

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>labels demo</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.3/themes/smoothness/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
  <script src="https://code.jquery.com/ui/1.13.3/jquery-ui.js"></script>
</head>
<body>
 
<label>
  Firstname
  <input id="name">
</label>
<label for="name">Please enter your name</label>
 
<script>
$( "input" ).labels().addClass( "ui-state-highlight" )
</script>
 
</body>
</html>

Demo: