Рубрики

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

Задача состоит в том, чтобы выбрать элемент / узел 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:

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

Рекомендуемые посты:

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

0.00 (0%) 0 votes