Reemplazar el texto pero mantener el elemento hermano con jQuery
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"><br />
<label><br />
<input name="rememberme" type="checkbox" id="rememberme"> <!-- mantener --><br />
Recuérdame <!-- este texto debe ser otro --><br />
</label><br />
</p>
- Primera solución: modificar el core del CMS, lo que no me interesa. ✖
- 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');
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);
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';
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ó.
Leer otros artículos