¿Cómo seleccionar una identificación que comienza con cierto carácter usando jQuery?

Dado un documento HTML y la tarea es seleccionar los elementos con ID comienza con ciertos caracteres usando jQuery.

Enfoque: Use jQuery [attribute^=value] Selector para seleccionar el elemento con ID que comienza con ciertos caracteres.

Ejemplo 1: Este ejemplo selecciona ese elemento cuyo ID comienza con ‘GFG’ y cambia su color de fondo.

<!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>                    

Producción:

  • Antes de hacer clic en el botón:
  • Después de hacer clic en el botón:

Ejemplo 2: Este ejemplo selecciona los elementos cuyo ID comienza con ‘GFG’ y establece su color de fondo.

<!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>                    

Producción:

  • Antes de hacer clic en el botón:
  • Después de hacer clic en el botón:

Publicación traducida automáticamente

Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *