This article will show you an idea of using the *= operator in jQuery attribute selectors. The *= operator is used to select the sub-string attribute and apply operations on it.
Syntax:
$("div[myAttr*='GFG']").jQueryMethod({
// Code
})
Approach: We will create HTML div elements with some attributes. We will use *= selector to select attributes with some specific values. After selecting the div elements, we will apply CSS styles to that element.
Example 1: In this example, we will use the *= operation to select the elements with specific sub-string and add CSS styles using jQuery. The output image shows that the CSS styles are not applied for the class which does not have the "GFG" sub-string.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<script src=
"https://code.jquery.com/jquery-3.5.0.js">
</script>
<title>
How to use *= operator in
jQuery attribute selector?
</title>
<style>
body {
text-align: center;
}
h1 {
color: green;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>
How to use *= operator in
jQuery attribute selector?
</h3>
<div class="GFG1">Web Technology</div>
<div class="GFG2">C Programming</div>
<div class="GFG3">JavaScript</div>
<div class="GFG4">Java Programming</div>
<div class="GFG5">Angular.js</div>
<div class="GFG6">Computer Network</div>
<div class="divClass">Algorithm</div>
<script>
$(document).ready(function () {
$( "div[class*='GFG']" ).css({
"background": "green",
"color": "white",
"width": "350px",
"margin": "auto"
});
});
</script>
</body>
</html>
Output:
Example 2: In this example, we will use the *= operation to select the elements with specific sub-string and add CSS styles using jQuery. The output image shows that the CSS styles are not applied for the class which does not have the "Geeks" sub-string with the "gfgid".
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<script src=
"https://code.jquery.com/jquery-3.5.0.js">
</script>
<title>
How to use *= operator in
jQuery attribute selector?
</title>
<style>
body {
text-align: center;
}
h1 {
color: green;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>
How to use *= operator in
jQuery attribute selector?
</h3>
<div gfgid="Geeks123">Web Technology</div>
<div gfgid="Geeks">C Programming</div>
<div gfgid="Geeks345">JavaScript</div>
<div gfgid="Geeksfor">Java Programming</div>
<div gfgid="GeeksforGeeks">Angular.js</div>
<div gfgid="Geeks678">Computer Network</div>
<div gfgid="divClass">Algorithm</div>
<script>
$(document).ready(function () {
$( "div[gfgid*='Geeks']" ).css({
"background": "green",
"color": "white",
"width": "350px",
"margin": "auto"
});
});
</script>
</body>
</html>
Output:
