Как выбрать элемент HTML, используя идентификатор в jQuery, когда идентификатор содержит символ точки?

28.12.2019JQuery, Веб-технологии, Веб-технологии Вопросы

Задача состоит в том, чтобы выбрать элемент / узел HTML по идентификатору, используя jQuery, когда сам идентификатор содержит DOT (' . '). Не только точки (.) Есть много других метасимволов, таких как ! # $ % & ' ( ) * + , . / : ; ? @ [ / ] ^ ` { | } ~ можно выбрать с помощью этой процедуры.

Синтаксис:

$('#ID_PREFIX\\.ID_SUFFIX')

Подход: чтобы выбрать элемент HTML по идентификатору, нам просто нужно экранировать его, используя двойную косую черту (' // ').

Пример 1: В этом примере мы изменим цвет элемента заголовка, используя 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;">

<! - Заголовок с идентификатором, содержащим ТОЧКУ,

будет выбрано позже ->

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

Выход:

Прежде чем нажать кнопку:
После нажатия на кнопку:

Пример 2: В этом примере мы выберем элемент с идентификатором, содержащим несколько точек, и изменим его цвет фона также с помощью заголовка.

<!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 содержит точку (.) ->

<body id="Main..Body">

<center>

<! - id содержит точку (.) ->

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

Выход 2: