La tarea es seleccionar un elemento/Node HTML por ID usando jQuery cuando el propio ID contiene un DOT (‘ . ‘). No solo los puntos (.), hay muchos otros metacaracteres que ! " # $% & ' ( ) * + , . / : ; < = > ? @ [ \ ] ^ ` { | } ~pueden seleccionarse mediante este procedimiento.
Sintaxis:
$('#ID_PREFIX\\.ID_SUFFIX')
Enfoque: para seleccionar un elemento HTML por ID, solo necesitamos escaparlo usando una barra inclinada doble (‘ \\ ‘).
Ejemplo 1: En este ejemplo, cambiaremos el color del elemento de encabezado usando jQuery.
<!DOCTYPE html>
<html>
<head>
<title>
How to select html element using ID in
jQuery when ID contains a dot character ?
</title>
<script src=
"https://code.jquery.com/jquery-3.4.1.min.js">
</script>
</head>
<body style="text-align:center;">
<!-- Heading with ID containing a DOT that
will be selected later -->
<h1 id="Geeks.Head" style="color: green;">
GeeksforGeeks
</h1>
<b>
A Computer Science
portal for Geeks
</b>
<br>
<p>
Select html nodes by ID with jQuery
when the id contains a dot
</p>
<button style="color: green;">
Click!
</button>
<script type="text/javascript">
$('button').click(function() {
// Selecting ID containing a
// DOT by escaping using '\\'
$('#Geeks\\.Head').css({
'color': 'black'
});
});
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Ejemplo 2: En este ejemplo, seleccionaremos un elemento con ID que contiene múltiples puntos y cambiaremos su color de fondo también con el encabezado.
<!DOCTYPE html>
<html>
<head>
<title>
How to select html element using ID in
jQuery when ID contains a dot character ?
</title>
<script src=
"https://code.jquery.com/jquery-3.4.1.min.js">
</script>
</head>
<!-- id contains dot(.) -->
<body id="Main..Body">
<center>
<!-- id contains dot(.) -->
<h1 id="Geeks.Head" style="color: green;">
GeeksforGeeks
</h1>
<b>
A Computer Science
portal for Geeks
</b>
<br>
<p>
Select html nodes by ID with jQuery
when the id contains a dot
</p>
<button style="color: green;">
Click!
</button>
</center>
<script type="text/javascript">
$('button').click(function() {
// Selecting ID containing a
// DOT by escaping using '\\'
$('#Geeks\\.Head').css({
'color': 'purple'
});
// Selecting ID containing
// multiple DOTs
$('#Main\\.\\.Body').css({
'background-color': 'Yellow'
});
});
</script>
</body>
</html>
Salida 2:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
