15

Resulta que siguiendo la documentación de la librería fancybox me encuentro que para definir el comportamiento de sus elementos mediante clases se debe seguir una sintaxis como la siguiente:

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

Deseo añadirles «x» comportamientos por medio de jQuery a ese tipo de elementos, pero me encuentro que aún escapando el caracter de «.» (punto) con la barra invertida () no toma el elemento.

Dejo el siguiente 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>

2
  • Ojo! usar puntos en el nombre de una clase puede resultar confuso para otro programador que le toque hacer el mantenimiento. Recuerda que el punto (.) tiene significado propio. Commented el 15 dic. 2015 a las 12:44
  • @rnrneverdies si lo tengo en cuenta, de momento es la solución más friendly para el usuario.
    – Chofoteddy
    Commented el 15 dic. 2015 a las 17:25

3 respuestas 3

13

El problema está aquí (en el slash):

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

Cámbialo por .fancybox\\.image con doble slash.

El resto del código está bien, lo que pasa es que la cadena '\.' en JavaScript se convierte en solo '.' porque \ es el caracter de escape, y lo que quieres es que el selector reciba \..

7

Sólo encierra entre comillas simples o dobles, dependiendo de cuáles uses para definir el selector, el valor del atributo class. Esto es:

$("[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>

0

Resulta que Jquery en la versión 3.0 ha agregado un nuevo método llamado escapeSelector. Lo que permite es poder hacer selecciones de elementos con caracteres propios de los operadores de selección de css.

Su uso sería algo parecido a esto

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

Tienes más información aqui https://jquery.com/upgrade-guide/3.0/#selector

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.