Skip to main content
2 de 2
se añadieron 302 caracteres en el cuerpo
roberthung
  • 115
  • 4
  • 16

JQuery: Colocar cada caracter de un string a un <span>

Tengo muchos botones, con dos clases diferentes, los cuales tienen una transición que parte a través de separar el texto de los mismos letra por letra y colocar cada una en un span.

Para explicarlo mejor, tengo estos tres botones:

<a href="#" class="button">Sign up</a>
<a href="#" class="button">Get started</a>
<a href="#" class="button2">Continue</a>

Con esta funcion en JavaScript logré lo que quería:

(function() {
  var elems, button, i, span = "";
  elems = document.querySelectorAll('.button').length;
    for (j = 0; j < elems; j++)
    {
        button = document.querySelectorAll(".button")[j];
        let span = "<div>";
        for (i = 0; i < button.innerText.length; i++)
        {
            span += "<span>";
            if (button.innerText[i] !== " ")
            {
              span += button.innerText[i];
            }
            else
            {
              span += "&nbsp";
            }
            span += "</span>";
        }
        span += "</div>";
        button.innerHTML = span;
    }
}());

Pero sucede que debido a que tienen la misma clase "button", el texto concatenado del primer botón ("Sign up") se suma al siguiente y se ve así: "Sign up Get started".

introducir la descripción de la imagen aquí

Haciendo un console.log(button.innerHTML); dentro del primer foreach obtuve esto:

<div>
    <span>S</span>
    <span>i</span>
    <span>g</span>
    <span>n</span>
    <span>&nbsp;</span>
    <span>u</span>
    <span>p</span>
</div>

En el segundo botón se concatena todo así:

<div>
    <span>S</span>
    <span>i</span>
    <span>g</span>
    <span>n</span>
    <span>&nbsp;</span>
    <span>u</span>
    <span>p</span>
</div>
<div>
    <span>G</span>
    <span>e</span>
    <span>t</span>
    <span>&nbsp;</span>
    <span>s</span>
    <span>t</span>
    <span>a</span>
    <span>r</span>
    <span>t</span>
    <span>e</span>
    <span>d</span>
</div>

La idea es que cada botón tenga su texto aparte con el fin de poder hacer la transición que les comento, que de verdad no viene al caso acá ya que es por css y al tener ambos textos de los botones correctamente este funciona perfecto.

Tambien, el tercer botón que tiene el texto "Continue" y la clase "button2" lo necesito hacer con la misma función pero tampoco tengo la idea de como reutilizar el código para cualquier clase de botón que tengo en el proyecto.

Llevo horas tratando de resolverle, me recomendaron cambiar a JQuery pero la verdad necesito ayuda con ello... apenas estoy comenzando con JavaScript.

Gracias.

roberthung
  • 115
  • 4
  • 16