Buenas señores del foro necesito de su ayuda;tengo varios elementos de la siguiente forma:
<a href="AccionesModerador.jsp?AjaxPar= <%=rsPagination.getString("idModeradores")%> &Action=Est&Proc=<%=CambiarEstado%>" class="CambiarEnlaceModerador"> <%=CambiarEstado%></a>
Todos los elementos tienen la misma class ; ahora mi pregunta es a traves de javascript como puedo cambiar sus propiededes a todos mis elementos, en especifico necesito cambiar a traves de innerHTML que modifique el texto que contenga gracias
Ej jQuery seria bastante sencillo gracias a sus selectores. En javascript nativo es un poco mas complicado.
Existe el selector getElementsByClassName pero el soporte en IE empieza desde la versión 9.
var elementos = document.getElementsByClassName('CambiarEnlaceModerador');
for(var i=0; i<elementos.length; ++i){
elementos[i].innerHTML = 'Prueba';
}
Existen varias alternativas.. una de ellas es obtener todos los elementos del mismo tag y comparar mediante atributos. Otra asignar a todos los elementos que quieras modificar un ID que solo varia mediante un numero al final.
En el caso de todo por tag.
var elementos = document.getElementsByTagName('a');
for(var i=0; i<elementos.length; ++i){
if(elementos[i].getAttribute('class')==='CambiarEnlaceModerador'){
elementos[i].innerHTML = 'Prueba';
}
}
El soporte para getElementsByTagName se añade en IE 5.5 así que no deberías tener problema. El problema seria el getAttribute que se incluye en la versión 8... pero la 8 yo creo que es mas que suficiente.
Saludos
Siguiendo con JQuery como decia drvy ;D, prodria ser algo asi...
$(document).ready(function() {
$('.CambiarEnlaceModerador').html(function(){
//cambiar los atributos
$(this).attr('href', 'Nuevadireccion.html');
$(this).attr('class', 'CambiarClass');
//cambiar el nombre
return 'prueba';
});
});
Y ademas das soporte a versiones mas antiguas de los navegadores.
http://jquery.com/
http://caniuse.com/#feat=getelementsbyclassname
Y si desearia cambiar el mismo atributo pero con la condicion de que <%=CambiarEstado%> tenga identificadores:
Si CambiarEstado=='1' que se escriba 'Prueba1'
Si CambiarEstado=='2' que se escriba 'Prueba2'
......
gracias por su tiempo
Si entendi bien.. no hace falta condicionales, podes concatenarlo.
<html>
<head>
<!-- <script src="jquery-2.0.3.min.js"></script> -->
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.CambiarEnlaceModerador').html(function(){
//Obtener estado antes de generar cambios
estado = $(this).text();
//cambiar los atributos
$(this).attr('href', 'Nuevadireccion.html');
$(this).attr('class', 'CambiarClass');
//cambiar el nombre
//y concatenamos
return 'prueba'+estado;
});
});
</script>
<style type="text/css">
.CambiarEnlaceModerador{background-color: red;}
.CambiarClass{background-color: green;}
</style>
</head>
<body>
<a href="#" class="CambiarEnlaceModerador">1</a>
<a href="#" class="CambiarEnlaceModerador">2</a>
<a href="#" class="CambiarEnlaceModerador">3</a>
<a href="dir.html" class="CambiarEnlaceModerador">4</a>
<a href="#" class="CambiarEnlaceModerador">5</a>
<a href="#" class="CambiarEnlaceModerador">6</a>
</body>
</html>
Estoy implementado esta logica :
var elementos = document.getElementsByTagName('a');
for(var i=0; i<elementos.length; ++i){
if(elementos[i].getAttribute('class')==='CambiarEnlaceModerador'){
if (elementos[i].innerHTML === 'Suspender') {
elementos[i].innerHTML = 'Play';
}
if (elementos[i].innerHTML === 'Activo') {
elementos[i].innerHTML = 'Active';
}
}
}
Estaria bien de esa manera colocarlo !!!!!