Home / Questions / 996
Accepted
Chofoteddy
Asked: 2020-12-15 17:14:10 +0800 CST 2020-12-15 17:14:10 +0800 CST

Get element with dot in class name with JQuery

  • 772

It turns out that following the documentation of the fancybox library, I find that to define the behavior of its elements through classes, a syntax like the following must be followed:

<a href="http://www.dominio-ejemplo.mx/pagina" class="fancybox.iframe">
    <!-- Código HTML -->
</a>

I want to add " x " behaviors via jQuery to such elements, but I find myself still escaping the "." (dot) with the backslash () does not take the element.

I leave the following snippet:

$(function(){
  $('button').on('click', function(){
    /* No funciona */
    $('.fancybox\.image').remove();
  });
});
.fancybox\.iframe {
  color: white;
  background-color: red;
}

.fancybox\.image {
  color: white;
  background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul>
  <li>
    <a href="http://www.dominio-ejemplo.mx/pagina" class="fancybox.iframe">Estilo iframe</a>
  </li>
  <li>
    <a href="http://www.dominio-ejemplo.mx/pagina" class="fancybox.image">Estilo imagen</a>
  </li>
</ul>

<button>Borrar: fancybox.iframe</button>

javascript

3 Answers

  1. Best Answer

    The problem is here (in the slash):

    $('.fancybox\.image').remove();

    Change it to .fancybox\\.imagewith double slash.

    The rest of the code is fine, what happens is that the string '\.'in JavaScript is converted to just '.'because \it's the escape character, and what you want is for the selector to receive \..

    • 13

  2. Just enclose the value of the attribute in single or double quotes, depending on which ones you use to define the selectorclass . That is:

    $("[class='fancybox.iframe']").remove();


    $(function(){
  $('button').on('click', function(){
    /* No funciona */
    // $('.fancybox\.image').remove();
    $("[class='fancybox.iframe']").remove();
  });
});
    .fancybox\.iframe {
  color: white;
  background-color: red;
}

.fancybox\.image {
  color: white;
  background-color: green;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul>
  <li>
    <a href="http://www.dominio-ejemplo.mx/pagina" class="fancybox.iframe">Estilo iframe</a>
  </li>
  <li>
    <a href="http://www.dominio-ejemplo.mx/pagina" class="fancybox.image">Estilo imagen</a>
  </li>
</ul>

<button>Borrar: fancybox.iframe</button>

    • 7

  3. It turns out that Jquery in version 3.0 has added a new method called escapeSelector. What it allows is to be able to make selections of elements with characters typical of the css selection operators.

    Its use would be something like this

    $( "#" + $.escapeSelector( "abc.def" ) )

    You have more information here https://jquery.com/upgrade-guide/3.0/#selector

    • 0