Recorrer secuencialmente li de ul anidados

doylelives · #1 (**permalink**) 30/12/2009, 14:07

Hola a todos!
Tengo una lista de items. a su vez cada item posee una sublista de items.
Cada item es un enlace.
Quiero usar 2 botones (Previo, Siguiente ) para navegar secuencialmente a traves de los enlaces.
Pero por ahora el problema es que si el siguinte item posee una lista (ul) me muestra ese siguiente item y a su vez sus subitems

Código PHP:

  $("#contenedor  li").click(function(){
        alert($(this).next().text());
});

Gracias!

mayid · #2 (**permalink**) 30/12/2009, 15:07

Si queres seleccionar solamente enlaces, entonces usa algo como $(this).next("a").text()

Creo que fucionará.

doylelives · #3 (**permalink**) 04/01/2010, 07:05

Lo probé, pero me muestra un "undefined"

Código PHP:

  $(this).next("a").attr("href")

¿que estoy haciendo mal?

mayid · #4 (**permalink**) 04/01/2010, 10:40

No conozco tu html, pero creo que estas queriendo ir de un enlace a otro. O es de un li a otro li?

Por que no posteas el html y lo vemos? Mismo tu funcion.

doylelives · #5 (**permalink**) 04/01/2010, 11:41

A partir del id "main" elijo los li, pero existe el caso en que puede haber otra lista dentro de un li

Código PHP:

  <ul id="main"> 
  <li><a href="a.html">Chapter A</a></li> 
  <li><a href="b.html">Chapter B</a></li> 
  <li><span class="file"><a href="c.html">Chapter C</a></span>  
      <ul> 
        <li><a href="c1.htm">C - 1.1</a></li> 
    <li><a href="c2.htm">C - 1.2</a></li> 
      </ul> 
  </li> 
  <li><a href="d.html">Chapter D</a></li> 
</ul>

La idea es usar 2 botones, Previo, Siguiente, para navegar entre los enlaces en orden secuencial, por ahora solo necesito que al hacer click en "Chapter B" seleccionar el li Chapter C pero no los li "C - 1.1" ni "C - 1.2"

mayid · #6 (**permalink**) 04/01/2010, 11:58

Entonces, corrigiendo lo que dije antes, el selector puede ser este:

Cita:

$(this).next("li")

Pero no se si va a seleccionar uno o todos, porque me parece que "next" hace referencia a "proximos" en sentido de "cercanos" y no a "proximo" en sentido de "siguiente". Probalo por favor y comenta los resultados.

Aqui estan todos los selectores, por cierto: http://docs.jquery.com/Selectors

Dany_s · #7 (**permalink**) 04/01/2010, 20:26

no sé si será óptimo o es lo que buscas pero lo hice así

usa el selector "parent > child" para seleccionar los li que descienden de la lista #main

Código HTML:

<html>
<head>
    <title>Prueba</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        $(function (){
            var aux = 0;
            var links = $("#main>li a");
            sel = links.eq(aux);
            sel.addClass('seleccionado');

            $('#anterior').click( function (){
                if (aux){
                    sel.removeClass('seleccionado');
                    sel = links.eq(--aux);
                    sel.addClass('seleccionado');
                }
            });

            $('#siguiente').click( function (){
                if ( (links.length - 1) > aux ){
                    sel.removeClass('seleccionado');
                    sel = links.eq(++aux);
                    sel.addClass('seleccionado');
                }
            });
        });

    </script>
    <style>
    .seleccionado{background-color:red;}
    </style>
</head>
<body>
    <ul id="main">
      <li><a href="a.html">Chapter A</a></li>
      <li><a href="b.html">Chapter B</a></li>
      <li><span class="file"><a href="c.html">Chapter C</a></span>
          <ul>
            <li><a href="c1.htm">C - 1.1</a></li>
            <li><a href="c2.htm">C - 1.2</a></li>
          </ul>
      </li>
      <li><a href="d.html">Chapter D</a></li>
    </ul>
    <a id="anterior" href="#">Anterior</a> - <a id="siguiente" href="#">Siguiente</a>
</body>
</html>

doylelives · #8 (**permalink**) 05/01/2010, 06:45

Espectacular, Dany_s justo lo que deseaba, ya lo adapté a mi pagina, gracias gente!