Attribute Contains word Selector [name~”value”]

It Selects all the elements with specified attribute, with value containing specific word. It represents an element with attribute value which contains a value with given word. This selector matches element with given attribute value. A word is defined as string value delimited by space.

attribute Contains Word selector

Description

Selects elements that have the specified attribute with a value containing a give word, delimited by spaces

jQuery(“[attribute~=’value’]”)

attribute: An attribute name.

value: An attribute value. Can be either a valid identifier or a quoted string

This selector matches the test string against each word in the attribute value, where a “word” is defined as a string delimited by whitespace. The selector matches if the test string is exactly equal to any of the words.

Example

Finds all inputs with a name attribute that contains the word ‘man’ and sets the value with some text.

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="utf-8">
     <title>attributeContainsWord.demo</title>
     <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>

<input name="man-news">
<input name="milk man">
<input name="letterman2">
<input name="newmilk">

<script>
$( "input[name~='man']").val( "mr. man is in it!");
</script>

</body>
</html>

Demo:

Leave a Reply

Your email address will not be published.