Reemplazar el texto pero mantener el elemento hermano con jQuery

17/abr/2013 3

Problema: WordPress imprime un código HTML con el siguiente formato y necesito modificar sólo el texto, manteniendo el checkbox:

<p class="login-remember">
<label>
<input name="rememberme" type="checkbox" id="rememberme"> <!-- mantener -->
Recuérdame <!-- este texto debe ser otro -->
</label>
</p>
  1. Primera solución: modificar el core del CMS, lo que no me interesa.
  2. Segunda solución: modificar el texto con jQuery, manteniendo el checkbox.

Test 1: lo obvio, reemplazar el texto con text()

$('.login-remember label').text('Recordámelo');

Ver ejemplo 1

En este caso, apesar de sólo querer reemplazar el texto también reemplaza el checkbox.

Test 2: clonar el checkbox, reemplazar el texto con html() y volver a agregar el checkbox clonado

var elemento = $('.login-remember label')
var checkbox = elemento.find('input').clone();
elemento.html(' Recordámelo').prepend(checkbox);

Ver ejemplo 2

Efectivo, no importa dónde o cómo está el texto. Limpiamos todo y volvemos a construir lo que está dentro del label.

Test 3: buscar dentro del contenido del label donde está el texto y reemplazarlo

$('label').contents().last()[0].textContent=' Recordámelo';

Ver ejemplo 3

Dependemos un poco del orden de los elementos dentro del label, pero es una sencilla solución.

¿Cuál es la mejor?

Lo dejo a criterio de cada uno, seguro hay una más rápida que otra. Finalmente no utilicé ninguna de las soluciones anteriores; edité el languages.po y volví a traducir el texto por el que quería. Pero el desafío fue interesante, y el aprendizaje quedó.

Comentarios

  1. César [#]

    ¿Y no es mejor cambiar la traducción de la cadena que queramos en el fichero de idioma que para eso está?

  2. Jorge Epuñan [#]

    César: eso fue lo q terminé haciendo, pero el reto me fue mucho más interesante. A veces la solución no es el fin, sino el camino.

  3. Pedro [#]

    $(‘.login-remember label’).child(“input”).text(‘Recordámelo’);

    No hay que hacer tanto lío de clonar ni nada. Simplemente haces un selector hacia el texto y sustituyes.

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab