Mover estilo entre elementos con Jquery

[José Molina]

Saludos

Tengo lo siguiente:

Código HTML:

<div id="uno">
<span class="aqui">Pete 1</span>
<span class="">Pete 2</span>
<span class="">Pete 3</span>
</div> 

A los 5 segundos, quiero que quede así:

Código HTML:

<div id="uno">
<span class="">Pete 1</span>
<span class="aqui">Pete 2</span>
<span class="">Pete 3</span>
</div> 

A los 5 segundos, quiero que quede así:

Código HTML:

<div id="uno">
<span class="">Pete 1</span>
<span class="">Pete 2</span>
<span class="aqui">Pete 3</span>
</div> 

Y al llegar al último elemento, luego de 5 segundos, vuelva al inicio:

Código HTML:

<div id="uno">
<span class="aqui">Pete 1</span>
<span class="">Pete 2</span>
<span class="">Pete 3</span>
</div> 

Gracias!

[diurno10]

haces una function con settimeout y luego con el selector id = uno buscas el hijo que tenga class=aqui , ahi mismo le haces removeclass y buscas el next elemento y le aplicad esa clase

[José Molina]

Gracias diurno10 por la guía.

Logre hacer ésto:

Código HTML:

  setInterval(function() {
    var capa = $('#uno span.aqui');

    capa.removeClass('aqui');
    capa.next().addClass('aqui');
  }, 2000);

El problema que tengo es que luego que llega al ultima elemento, el NEXT deja de funcionar.

Cómo podría hacer para que al llegar al último elemento el addClass lo aplique al primer elemento hijo de #uno ??

[Alexis88]

Puedes hacerlo así:

Código Javascript:

var actual, siguiente, i = 0, 
    spans = $("#uno").find("span"),
    total = spans.length;
setInterval(function(){
    actual = $(".aqui");
    if (i == total - 1){
        siguiente = spans.first();
        i = 0;
    }
    else{
        siguiente = actual.next();
        i++;
    }
    actual.removeClass("aqui");
    siguiente.addClass("aqui");
}, 5000);
 

Declaro dos variables en las que almacenaré al elemento actual en la secuencia (el que posee la clase) y al que le sigue, además de una variable que usaré como contador para saber en qué número de elemento vamos, el total de elementos <span> contenidos en el elemento de id 'uno' y el total que estos representan.

En el temporizador, ejecuto una función cada cinco segundos, en la cual tomo al elemento que posee la clase 'aqui' y lo asigno a actual, luego, verifico el valor del contador; si este es igual al total de elementos <span> menos 1, es decir, si es el último de ellos (recordando siempre que, en una lista de nodos, así como en los arrays y cadenas, la primera posición es cero), el elemento que asignaremos a siguiente será el primero de los <span>, además de reiniciar el valor del contador en cero, pero si todavía no hemos llegado al final, el elemento a asignar a siguiente será el que continúa después del elemento asignado a actual, además, sumamos 1 al contador para seguir avanzando en la secuencia.

Finalmente, retiro la clase al elemento actual y se la asigno al siguiente.

DEMO

Saludos

[José Molina]

Gracias Alexis88

Finalmente logre solventarlo así:

Código HTML:

setInterval(function() {
    var totalsp = ($('#uno span').size()-1);
    var capa = $('#uno span.aqui');

    capa.removeClass('aqui');

    if ((capa.index()>=0) && (capa.index()<totalsp)){
       capa.next().addClass('aqui');
    }else{
       $('#uno span').first().addClass('aqui');     
    }
  }, 2000);

[Alexis88]

Había olvidado que existe el método .index(). Mucho JS nativo me está pasando factura.

Solo como recomendación, trata de declarar a todas las variables que vayas a usar en el mismo bloque de declaraciones, por un tema de eficiencia. Aquí puedes leer una referencia acerca de lo que te digo.

Saludos