JQuery.Next() sin el selector no funciona como se esperaba

Estoy tratando de configurar un panel giratorio, sin embargo, tengo tres estados: activo, inactivo, deshabilitado.JQuery.Next() sin el selector no funciona como se esperaba

Solo quiero rotar entre paneles activos e inactivos y omitir paneles deshabilitados. Si no hay más paneles inactivos, gire nuevamente al primer panel.

Sin embargo, con el siguiente código, haga clic en el botón seleccionar panel1, panel 2 y volver al panel 1, sin seleccionar panel5 .. Si elimino el selector no de la parte en negrita, funciona como se esperaba. Creo que entiendo (o no) el siguiente operador. ¿Alguna idea?

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<script src="http://code.jquery.com/jquery-1.7.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    $(function() { 
     $("#rotate").click(function() { 
      var ActivePanel = $('.active');     //Get the current active panel 
      var NextPanel = $('.active').next('.inactive:not(.disabled)'); //Get the next panel to be active. 
      if (NextPanel.length == 0) NextPanel = $("#panel1"); //check for null next. if so, rotate back to the first panel 

      console.log("Active Panel: ", ActivePanel); 
      console.log("Next Panel: ", NextPanel); 

      $(ActivePanel).removeClass("active").addClass("inactive"); 
      $(NextPanel).removeClass("inactive").addClass("active"); 
     }); 
    });  
    </script> 
</head> 
<body> 
    <button id="rotate">Rotate Active Panel</button> 
    <div id="panel1" class="active"><p>Some Content</p></div> 
<div id="panel2" class="inactive"></div> 
<div id="panel3" class="inactive disabled"></div> 
<div id="panel4" class="inactive disabled"></div> 
<div id="panel5" class="inactive"></div> 
</body> 
</html>

Fuente

2011-12-02 grausamer_1

intenta usar los siguientes hermanos ~ selector seguido de un anidado .class, :not(.class) y :first selector de

$("#rotate").click(function() { 
    var ActivePanel = $('.active'); 
    var NextPanel = $(".active ~ .inactive:not(.disabled):first"); 
    if (NextPanel.length == 0) NextPanel = $("#panel1");  
    $(ActivePanel).removeClass("active").addClass("inactive"); 
    $(NextPanel).removeClass("inactive").addClass("active"); 
});

Ejemplo de trabajo:http://jsfiddle.net/hunter/vfVBB/

Next Siblings Selector (“prev ~ siblings”)

Descripción: Selecciona todos los elementos relacionados que siguen después del elemento "prev", tienen el mismo padre, y combinar las filtro del selector "hermanos".

Fuente

2011-12-02 16:55:47 hunter

Esto funciona pero no entiendo por qué esto no funciona: var NextPanel = $ (". Active"). Brothers (". Inactive: not (.disabled): first") ; –

'.siblings()' toma todos los elementos hermanos, antes o después. Esta es la razón por la cual el primer elemento selecciona el segundo elemento y el segundo elemento el primero. – hunter

Sí, ahora lo veo. Gracias por enseñarme el selector '~'. 10 puntos para gryffindor. Para aquellos interesados, la documentación está aquí: http://api.jquery.com/next-siblings-selector/ –

El método next sólo devuelve el hermano inmediata si coincide con el selector. Utilice the nextAll method.

Pruebe lo siguiente:

$("#rotate").click(function() { 
    var activePanel = $('.active'); //Get the current active panel 
    var nextPanel = activePanel.nextAll('.inactive').not('.disabled').first(); //Get the next panel to be active. 
    if (!nextPanel.length) { 
    nextPanel = $("#panel1"); //check for null next. if so, rotate back to the first panel 
    } 

    console.log("Active Panel: ", activePanel); 
    console.log("Next Panel: ", nextPanel); 

    $(activePanel).removeClass("active").addClass("inactive"); 
    $(nextPanel).removeClass("inactive").addClass("active"); 
});

See here for jsFiddle.

Fuente

2011-12-02 16:55:10

Esto sólo rota entre panel1 y panel2. –

@ grausamer_1 Respuesta actualizada. –

Esto también funciona ... ¡Gracias por su tiempo y esfuerzo! –

Sin embargo, otra manera de hacerlo

.nextAll(".inactive:not(.disabled):first")

Fuente

2012-01-31 21:53:07 Levitikon

JQuery.Next() sin el selector no funciona como se esperaba

Respuesta

Cuestiones relacionadas