Jquery: sacarle class a uno y ponersela al siguiente

shiolo10 · #1 (**permalink**) 21/10/2010, 18:47

Hola, como andas. Les quiero hacer una consulta ya que soy novato en jquery y queria hacer lo siguiente, tengo una lista de li, de los cuales hay uno esta seleccionado, tiene la clase activeslide. Quiero que cuando haga click en un link (#next) le saque la clase activeslide y se la ponga al siguiente li. Estaba probando el siguiente codigo y no me funciona.

Código:

$('#next').click(function(){
	$('.activeslide').removeClass('activeslide');
	$('.activeslide').next().addClass('activeslide');
});

que estoy haciendo mal y que puedo cambiar para que funcione??
muchisimas gracias

caricatos · #2 (**permalink**) 22/10/2010, 00:28

Tema movido desde javascript

Dany_s · #3 (**permalink**) 22/10/2010, 05:14

Código HTML:

Ver original<html>
    <head>
        <title>Ejemplon</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    </head>
        <script type="text/javascript">
            $( function (){
                $('#next li').click( function (){
                    if (typeof active != "undefined")
                        active.removeClass('activeslide');
                    active = $(this).addClass('activeslide');
                });
            });
        </script>
    <style>
        .activeslide{background:blue;}
    </style>
    <body>
        <ul id="next">
            <li>Uno</li>
            <li>Dos</li>
            <li>Tres</li>
            <li>Cuatro</li>
        </ul>
    </body>
</html>

shiolo10 · #4 (**permalink**) 22/10/2010, 10:04

gracias por la ayuda, pero lo que tenia queria era usar una especia de NEXT, entonces deberia detectarme cual es el active y pasarselo al siguiente. como puedo modificar para que suceda eso? gracias!

mayid · #5 (**permalink**) 22/10/2010, 11:23

Podes usar perfectamente el next() para moverte y asignar la clase. No pidas todo resuelto, vale?

En cuanto es este tema, que esta repetido, fijate si podes borrarlo desde el menu Herramientas:
http://www.forosdelweb.com/f127/nova...uiente-852959/

shiolo10 · #6 (**permalink**) 22/10/2010, 11:30

es lo que hice, usar el next, fijate en el codigo que puse, pero por algo no funciona y por eso pido ayuda.
puede ser que en el primer comando le saco la clase activeslide y en el segundo quiero buscar el que tiene esa clase pero ya nadie la tiene??
el otro post ya pedi que me lo borren yo no podia borrarlo.
gracias

mayid · #7 (**permalink**) 22/10/2010, 12:30

Es que cada vez que usas este selector de clases estás seleccionando un grupo de tags html:

$('.activeslide')

Entonces, next() no te sirve. Aca no estamos iterando dentro de un array...

Lo que necesitas es usar $(this) para referirte al elemento clickeado. Y usando next() seleccinoarías el elemento html siguiente, sea cual fuere (del tipo que fuere)

Yo haría esto dentro de un document.ready:

Código Javascript:

Ver original$( function (){
                $('#next li').click( function (){
                        active = $(this);
                       
                        active.removeClass('activeslide');
                         active.next().addClass('activeslide')
                   
                });
            });

shiolo10 · #8 (**permalink**) 22/10/2010, 12:45

gracias!! usando lo que me dijiste corregi el codigo y me quedo asi:

Código:

$('#next').click(function(){
	active = $('li.activeslide')
	active.removeClass('activeslide');
	active.next().addClass('activeslide');
});

funciona perfectamente! lo unico que faltaria arreglar es que cuando llegue al ultimo li que vuelva al 1ro, voy a tratar de arreglarlo eso, si a alguien se le ocurre algo me ayudaria pero sino despues voy probando!
gracias de nuevoo

mayid · #9 (**permalink**) 22/10/2010, 14:17

No estoy seguro de que sea lo que yo dije. No estas usando $(this). Pero si te funciona bien, ok.

El volver al primer item puede ser facil si la cantidad de elementos es fija. Si no lo es, también se puede llegar a hacer con algun condicional.

Saludos!

shiolo10 · #10 (**permalink**) 22/10/2010, 20:23

no use el this porque no queria usar el click, el next esta en otra parte, para lo que queria era mas facil.
el numero es fijo de elementos, por donde podria empezar para hacer lo que de la vuelta, gracias

mayid · #11 (**permalink**) 22/10/2010, 21:00

Sabiendo el numero de elemento, les pones un id, o un atributo rel unico (no importa que atributo uses), y luego decis:

Código Javascript:

Ver originalif ( active.attr("rel") = 7 ) 
$('#next li ')[0].addClass('activeslide');

Entonces, despues del siete (el ultimo) volves al primero.

Si eso no te funciona, usa .get(0)
http://api.jquery.com/get/

Saludos!

Dany_s · #12 (**permalink**) 23/10/2010, 11:39

Código Javascript:

Ver original<html>
<head>
    <title>Pruebas</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(function(){
    //Al primer li le agrego la clase y guardo el objeto en la variable
    active = $('li:first').addClass('activeslide');
    $('#next').click(function(){
        //al objeto que esta en 'active' le borro la clase, luego selecciono el siguiente y guardo en variable 'next'
        next = active.removeClass('activeslide').next();
        //Si existe un objeto en next (no se puede seleccionar algo luego de ultimo)
        if (next.length){
            //entonces le agrego la clase
            active = next.addClass('activeslide');
        } else {
            //Si no hay elemento voy al primeto
            active = $('li:first').addClass('activeslide');
        }
    });
});
</script>
</head>
<style>
    .activeslide{ background: blue}
</style>
<body>
    <ul>
        <li>Uno</li>
        <li>Dos</li>
        <li>Tres</li>
    </ul>
    <a href="#" id="next">Next</a>
</body>
</html>

shiolo10 · #13 (**permalink**) 25/10/2010, 11:04

Muchisimas gracias a los dos! ahora voy a probarlo, saludos