How to use *= operator in jQuery attribute selector ?
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.
HTML
<!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= </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”.
HTML
<!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= </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:
Please Login to comment...