Selectores Jquery

LR #1 Jun '12 Penitente

Buenas,

Necesito que me echeis una mano.

Tengo un codigo tal que así:

<ul id="lista">
  <li class="clase_1" data-activo="">blablabla</li>
  <li class="clase_2" data-activo="">blebleble</li>
  <li class="clase_3" data-activo="">bliblibli</li>
  <li class="clase_4" data-activo="">blobloblo</li>
  <li class="clase_5" data-activo="">blublublu</li>
</ul>

Con jquery lo unico que hago es jugar con data-activo en plan:

 $('#lista li').click(function(){
     if($(this).data("activo") != "activo"){
         $(this).data("activo","activo");
     }else{
         $(this).data("activo","");
     }
 });

Como veis, el codigo es simple a más no poder. Lo que quiero hacer ahora pero no se por donde cogerlo, es que cuando pulse en algun li, si no esta activo me lo active y desactive los demás, y si lo está, que me desactive solo los que hay activos

Algo en plan

<ul id="lista">
  <li class="clase_1" data-activo="activo">blablabla</li>
  <li class="clase_2" data-activo="">blebleble</li>
  <li class="clase_3" data-activo="activo">bliblibli</li>
  <li class="clase_4" data-activo="">blobloblo</li>
  <li class="clase_5" data-activo="activo">blublublu</li>
</ul>

Pulso en uno de los activos y que el resultado sea:

<ul id="lista">
  <li class="clase_1" data-activo="">blablabla</li>
  <li class="clase_2" data-activo="">blebleble</li>
  <li class="clase_3" data-activo="">bliblibli</li>
  <li class="clase_4" data-activo="">blobloblo</li>
  <li class="clase_5" data-activo="">blublublu</li>
</ul>

O bien

<ul id="lista">
  <li class="clase_1" data-activo="ACTIVO">blablabla</li>
  <li class="clase_2" data-activo="">blebleble</li>
  <li class="clase_3" data-activo="">bliblibli</li>
  <li class="clase_4" data-activo="">blobloblo</li>
  <li class="clase_5" data-activo="">blublublu</li>
</ul>

Thx de antemano

scumah #2 Jun '12

Creo que el .data() de jQuery no es para eso Creo que te vale para guardar la información que sea, pero no te altera el DOM para hacerlo. Puedes usar .attr() de la misma manera que el .data().

Así que básicamente quedaría así:

$('#lista li').click(function(){
    if($(this).attr("data-activo") != "activo") {
        $(this).attr("data-activo","activo");
    } else {
        $(this).attr("data-activo","");
    }
});?

Si quieres échale un ojo a esto funcionando en este fiddle, a ver si te vale.

1 respuesta

LR #3 Jun '12 Penitente

#2 Realmente ahora mismo lo estoy usando con .attr() pero no recuerdo que usuario de aqui me comentó que en html5 usando data-x te validaba html ya que no lo pillaba como los antiguos custom tags y que se podia acceder directamente desde .data()

De todas formas el problema es que no se como hacer para modificar todos los que cumplan con data-activo="activo"

Ahora mismo lo tengo como lo has puesto arriba, pero tendria que ir pinchando en cada uno para modificarlo.

La idea es que al hacer click, me aparezca un div debajo del li en el que he pinchado, el problema es que el resto deben cambiar el estado de activo a "" para no tener 1927541092759 divs abiertos, no se si me explico.

1 respuesta

Tig #4 Jun '12

Para encontrar los que cumplan con esa condición creo que esto valdrá

'li[data-activo="activo"]'

Si usas Chrome o Firefox + firebug, puedes ir a la consola de desarrollador y probar los selectores de forma fácil y rápida haciendo

$$.('mi selector CSS')

Lo descubrí ayer y me pareció muy útil, he tocado poco javascript/css

1 respuesta

scumah #5 Jun '12

#3 A ver, no sé exactamente para qué necesitas los custom data para lo que vas a hacer. Su fin principal es el de almacenar datos en los elementos, pero cuando se manipulan por JS no afectan al DOM, es decir, tu en un <li data-activo="activo"> puedes hacer un .data("activo", "inactivo" ) , pero en el inspector del explorador seguirá poniendo data-activo="activo", aunque un .data("activo" ) devolverá "inactivo". Espero estar explicándome xD

Para hacer lo que quieres, te vale con, antes de poner el $(this).attr("data-activo","activo" ), hacer un $("#lista li" ).attr("data-activo","" ), algo así:

$('#lista li').click(function(){
    if($(this).attr("data-activo") != "activo") {
        $("#lista li").attr("data-activo","");
        $(this).attr("data-activo","activo");
    } else {
        $(this).attr("data-activo","");
    }
});

Así quitas todos los activos antes de activar el que has clickado.

De todas formas, si entiendo lo que quieres hacer (Una lista con elementos desplegables), creo que esta no es la mejor manera de hacerlo. ¿Los divs que quieres cargar están en la misma página o los traes con ajax?

LR #6 Jun '12 Penitente

Estan en la misma página.

Basicamente, la lista es un menú lateral del que solo se ven 2px. Al hacer un hover, hago un animate y lo muestro y al salir se oculta automaticamente.

Lo que quiero es que al hacer click, me lo deje fijo (eso ya lo controlo con activo=activo) y me despliegue un div (simplemente juego con la visibilidad) y que al volver a clickear, me oculte los 2 elementos.

El problema que tengo ahora mismo es que al pinchar en varios se me quedan abiertos. Implementé lo de modificar el activo de todos. Me lo modifica pero necesito que antes de eso se ejecute la funcion de ocultar el menú solamente en los que esten activos. Ahi es donde está el problema, en que no se como seleccionar solo los activos para ocultarlos y luego modificar el atributo de todos.

Probaré lo de #4 a ver si consigo algo.

He hecho pruebas con .each() tambien pero no termino de aclararme xD

Con lo de #4 y un poquito de jquery extra lo he arreglado.

Thx a los 2

Selectores Jquery

Usuarios habituales

Tags