How to select ID that starts with certain character using jQuery ? - GeeksforGeeks

28 Jun, 2019
Given an HTML document and the task is to select the elements with ID starts with certain characters using jQuery.
Approach: Use jQuery [attribute^=value] Selector to select the element with ID starts with certain characters.
Example 1: This example selects that element whose ID starts with ‘GFG’ and change their background color.
<!DOCTYPE HTML> <html>     <head>         <title>             How to select ID starts with            certain character in jQuery ?        </title>                  <style>            #GFG_DIV {                background: green;                height: 100px;                width: 200px;                margin: 0 auto;                color: white;            }        </style>                  <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">        </script>    </head>           <body style = "text-align:center;">               <h1 style = "color:green;" >             GeeksForGeeks         </h1>              <p id = "GFG_UP" style =             "font-size: 19px; font-weight: bold;">        </p>                  <div id = "GFG_DIV">            This is Div box.        </div>                  <br>                  <button onClick = "GFG_Fun()">            click here        </button>                  <p id = "GFG_DOWN" style =            "color: green; font-size: 24px; font-weight: bold;">        </p>                  <script>            $('#GFG_UP').text("Click on button to change "                        + "background-color of element's "                        + "ID starts with 'GFG'");            function GFG_Fun() {                $( "[id^='GFG']" ).css("background-color", "pink");                $('#GFG_DOWN').text("Div hides after 1 second.");             }        </script>     </body> </html>                    
Output:
Before clicking the button:
After clicking the button:
Example 2: This example selects the elements whose ID starts with ‘GFG’ and set their background color.
<!DOCTYPE HTML> <html>     <head>         <title>             How to select ID starts with            certain character in jQuery ?        </title>                  <style>            #GFG_DIV {                background: green;                height: 100px;                width: 200px;                margin: 0 auto;                color: white;            }        </style>                  <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">        </script>    </head>           <body style = "text-align:center;">               <h1 style = "color:green;" >             GeeksForGeeks         </h1>              <p id = "GFG_UP" style =             "font-size: 19px; font-weight: bold;">        </p>                  <div id = "GFG_DIV">            This is Div box.        </div>                  <br>                  <button onClick = "GFG_Fun()">            click here        </button>                  <p id = "GFG_DOWN" style =            "color: green; font-size: 24px; font-weight: bold;">        </p>                  <script>            $('#GFG_UP').text("Click on button to change "                        + "background-color of element's "                        + "ID starts with 'GFG'");            function GFG_Fun() {                var value = "GFG";                $("[id^='" + value + "']" ).css("background-color", "pink");                $('#GFG_DOWN').text("Div hides after 1 second.");             }        </script>     </body> </html>                    
Output:
Before clicking the button:
After clicking the button:
jQuery-Misc
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
How to append HTML code to a div using JavaScript ?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills