How to select html element using ID in jQuery when ID contains a dot character ?
The task is to select an HTML element/node by ID using jQuery when the ID itself contains a DOT (‘ . ‘). Not only dots(.) there are so many other meta character such as ! " # $ % & ' ( ) * + , . / : ; < = > ? @ [ \ ] ^ ` { | } ~
can be selected by this procedure.
Syntax:
$('#ID_PREFIX\\.ID_SUFFIX')
Approach: In order to select an HTML element by ID we just need to escape it using double slash (‘ \\ ‘).
Example 1: In this example, we will change the color of the heading element using jQuery.
<!DOCTYPE html>
< html >
< head >
< title >
How to select html element using ID in
jQuery when ID contains a dot character ?
</ title >
< script src =
</ script >
</ head >
< body style = "text-align:center;" >
< 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 >
|
Output:
- Before Clicking the button:
- After Clicking the button:
Example 2: In this example we will select an element with ID containing multiple dots and change its background color also with the header.
<!DOCTYPE html>
< html >
< head >
< title >
How to select html element using ID in
jQuery when ID contains a dot character ?
</ title >
< script src =
</ script >
</ head >
< body id = "Main..Body" >
< center >
< 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 >
|
Output 2:
- Before Clicking the button:
- After Clicking the button:
Last Updated :
28 Nov, 2019
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...