Foros del Web » Programando para Internet » Jquery »

Selecciona con jquery un id con class concreto

Estas en el tema de Selecciona con jquery un id con class concreto en el foro de Jquery en Foros del Web. Necesito seleccionar una etiqueta con jquery con un id y un class concretos al mismo tiempo. Algo así como $('#identi .clase').click(...); He probado de muchas ...
  #1 (permalink)  
Antiguo 13/04/2010, 14:04
 
Fecha de Ingreso: julio-2009
Mensajes: 9
Antigüedad: 14 años, 8 meses
Puntos: 0
Selecciona con jquery un id con class concreto

Necesito seleccionar una etiqueta con jquery con un id y un class concretos al mismo tiempo.
Algo así como $('#identi .clase').click(...);

He probado de muchas formas pero no termina de funcionar.

Muchas gracias de antemano
  #2 (permalink)  
Antiguo 13/04/2010, 14:17
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 15 años
Puntos: 101
Respuesta: Selecciona con jquery un id con class concreto

Eso es redundante. Los id son unicos y con solo seleccionar por id es suficiente.

Por otro lado, esto habla de jerarquia:
$('#identi .clase')

... ahi buscas algo de clase "clase" dentro de algo con id identi
  #3 (permalink)  
Antiguo 13/04/2010, 14:40
 
Fecha de Ingreso: julio-2009
Mensajes: 9
Antigüedad: 14 años, 8 meses
Puntos: 0
Respuesta: Selecciona con jquery un id con class concreto

Se que suena redundante.. pero la idea es la siguiente.


Son una seríe de pestañas cada una con un id único, y con una clase comun, "enlace". La pestaña seleccionada en ese momento tiene una clase "enlace-sel"

Lo que quiero hacer seleccionar solo las pestañas con "enlace" con un selector

$('#identi1 .enlace').ajaxify(...)
$('#identi1 .enlace').click(...)
$('#identi2 .enlace').ajaxify(...)
$('#identi2 .enlace').click(...)

para que en el caso de se la clase "clase-sel" no funcione el enlace
  #4 (permalink)  
Antiguo 13/04/2010, 16:29
Avatar de juaniquillo
Colaborador
 
Fecha de Ingreso: noviembre-2005
Ubicación: San Juan, Puerto Rico
Mensajes: 5.745
Antigüedad: 18 años, 4 meses
Puntos: 281
Respuesta: Selecciona con jquery un id con class concreto

Creo que deberías tener una clase en común para que no tengas que repetir tantos clicks ni otras funciones, auqnue lo mejor es empezar seleccionando desde un ID:


Código HTML:
Ver original
  1. <div id="container">
  2.   <a href="#" class="pestana">pesta&ntilde;a 1</a>
  3.   <a href="#" class="pestana">pesta&ntilde;a 2</a>
  4. </div>

y el javascript:

Código Javascript:
Ver original
  1. $(document).ready(function(){
  2.     $('#container a.pestana').click(function(){
  3.         $(this).addClass('.selecrionado').siblings().removeClass('.selecrionado');
  4.         return false;
  5.     })
  6. })


Aunque la verdad es que no puedo opinar mucho sin haber visto lo que tienes ya.
__________________
Por fin.. tengo algo parecido a un blog
Y por lo visto ya estoy escribiendo...
  #5 (permalink)  
Antiguo 14/04/2010, 05:42
 
Fecha de Ingreso: julio-2009
Mensajes: 9
Antigüedad: 14 años, 8 meses
Puntos: 0
Respuesta: Selecciona con jquery un id con class concreto

Muchas gracias por las aportaciones.
AL final he conseguido una solución interesante para lo que quería conseguir.

Código HTML:
<!-- inicioBloque: tPesReg -->
<div id="pestanhas">
	<div id="pesdatos" class="enlaceuser-sel"><form method="post"  id="formdatos">{TUSDATOS}<input id="autorizado" name="autorizado" type="hidden" value="true" /></form></div>
	<div id="pespubli" class="enlaceuser"><form method="post"  id="formpubli">{PUBLICIDAD}<input id="autorizado" name="autorizado" type="hidden" value="true" /></form></div>
    <!--<div id="peseventos" class="enlaceuser">{EVENTOS}</div> -->
    <div class="clear"></div>
</div>


<!-- finBloque: tPesReg --> 
Estas son las pestañas que quiero controlar. Cada una ejecuta una accion diferente en jquery, por eso lo de diferenciarlas mediante id a cada una.



Código Javascript:
Ver original
  1. var $j = jQuery.noConflict();
  2.  
  3. $j(document).ready(function() {
  4.  
  5.     var pesactiva="pesdatos";
  6.  
  7.     function apagarActiva( activa)
  8.     {
  9.         activa="#"+activa;
  10.        
  11.         $j(activa).addClass('enlaceuser');
  12.         $j(activa).removeClass('enlaceuser-sel');
  13.     }
  14.  
  15.     function activar(activa)
  16.     {
  17.         $j(activa).addClass('enlaceuser-sel');
  18.         $j(activa).removeClass('enlaceuser');
  19.     }
  20.    
  21.  
  22. $j('#pespubli').click( function()
  23.                         {
  24.                             if( pesactiva!=$j(this).attr('id'))
  25.                             {
  26.                                 apagarActiva(pesactiva);
  27.                                 activar(this);
  28.                                 pesactiva=$j(this).attr('id');
  29.                                
  30.                                 $j(this).ajaxify({
  31.                                             event: false,
  32.                                             link :'/modulos/publicidad/back/index.php',
  33.                                             forms:"#formpubli",
  34.                                             target: '#bodydatos',
  35.                                             title:'Publicidad', // change page title. Since v2.0
  36.                                             method:'POST'
  37.                                             });
  38.                             }
  39.                         }
  40.  
  41.            );
  42. $j('#pesdatos').click( function()
  43.                         {
  44.                             if( pesactiva!=$j(this).attr('id'))
  45.                             {
  46.                                 apagarActiva(pesactiva);
  47.                                 activar(this);
  48.                                 pesactiva=$j(this).attr('id');
  49.  
  50.                                 $j(this).ajaxify({
  51.                                             event: false,
  52.                                             link :'/modulos/user/back/php/registrado.php',
  53.                                             forms:"#formdatos",
  54.                                             target: '#bodydatos',
  55.                                             title:'Datos de usuarios', // change page title. Since v2.0
  56.                                             method:'POST'
  57.                                             });
  58.                             }
  59.                         }
  60.  
  61.            );
  62.  
  63.  
  64.  
  65. });


La historia es tener varias pestañas, cada una realiza una carga con Ajaxify independiente con unos valores vía post para evitar acceder directamente a las paginas que cargo con ajaxify, si no es a través de las pestañas.

Una de ellas estará activa y no realizará nada si la pinchamos. Este era un problema, no conseguía desactivar el enlace y la solucion ha sido deshabilitar el evento en ajaxify y comprobar si era o no enlace activo antes de hacer la llamada a ajaxify.

Voy a seguir puliendo el código hasta dejarlo lo más claro y limpio posible, por si a alguien le sirve!

Seguimos trabajando!
  #6 (permalink)  
Antiguo 14/04/2010, 08:32
 
Fecha de Ingreso: diciembre-2009
Ubicación: Misiones
Mensajes: 867
Antigüedad: 14 años, 3 meses
Puntos: 65
Respuesta: Selecciona con jquery un id con class concreto

En todas las funciónes tenés como 10 instrucciones comunes, si tenes 10 pestañas vas a tener que generar como 100 lineas de código. En cada función lo único que es distinto son 3 parámetros para ajaxify que es 'title', 'forms' y 'link'.
Esos 3 parámetros lo podés obtener desde los atributos del formulario.

<form method="post" title="para parámetro title" action="/para/parametro/link" id="para parametro dorms">

entonces lo recuperás desde el div de la pastaña que se hizo click, algo como:

Código HTML:
<html>
<head>
    <title>Prueba</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script>
        $( function (){
            //a todos los div con class enclace que sean hijos directo de div con id pesthanas y que no tengan class clase-sel le asigno permito el click
            $("#pestanhas>div.enlace:not(.clase-sel)").live('click', function (){
                //elimino classs clase-sel
                $(this).siblings().removeClass('clase-sel');
                //agrego class clase-sel al clickeado asi no puede ser clickeado
                $(this).addClass('clase-sel');
                //Busco el form dentro de la pestaña clickeada
                form = $('form', this);
                //saco la url
                link  = form.attr('action');
                //saco el id
                forms = form.attr('id');
                //saco el titulo
                title = form.attr('title');
                //aca tengo los parámetros para ajaxify
                alert ('ID de form: '+forms+' - links'+link+' - el título: '+title);
            });
        });
    </script>
    <style>
        .clase-sel{background-color:red}
    </style>
</head>
<body>

<div id="pestanhas">
	<div class="enlace"><form method="post" title="Datos de usuario" action="/modulos/user/back/php/registrado.php"  id="formdatos">{TUSDATOS}<input name="autorizado" type="hidden" value="true" /></form></div>
	<div class="enlace"><form method="post" title="Publicidad" action="/modulos/publicidad/back/index.php"  id="formpubli">{PUBLICIDAD}<input name="autorizado" type="hidden" value="true" /></form></div>
    <div><form method="post" title="Publicidad" action="/modulos/publicidad/back/index.php"  id="formpubli">{nada no tiene class enlace}<input name="autorizado" type="hidden" value="true" /></form></div>
    <div class="enlace"><form method="post" title="OTRO" action="/otro.php"  id="formotro">{OTRO}<input name="autorizado" type="hidden" value="true" /></form></div>
    <div class="clear"></div>
</div>


</body>
</html> 

ahi agregas otro div con un formulario y con los parámetros del formulario ya te debaría funcionar para todos sin agregar funciones para cada div clickeado
  #7 (permalink)  
Antiguo 20/04/2010, 01:08
 
Fecha de Ingreso: julio-2009
Mensajes: 9
Antigüedad: 14 años, 8 meses
Puntos: 0
Respuesta: Selecciona con jquery un id con class concreto

Gracias por esta aportación, en cuanto limpie el código y funcione, lo compartiré!!!
  #8 (permalink)  
Antiguo 20/04/2010, 05:39
 
Fecha de Ingreso: julio-2009
Mensajes: 9
Antigüedad: 14 años, 8 meses
Puntos: 0
De acuerdo Respuesta: Selecciona con jquery un id con class concreto

Cita:
Iniciado por dalmont Ver Mensaje
Gracias por esta aportación, en cuanto limpie el código y funcione, lo compartiré!!!
Ya lo tengo casi perfecto. Tenías toda la razón en cuanto a repetir el mismo código, hay que prever llegar a tener 10 enlaces.

No tenía controlada la función siblings

Código Javascript:
Ver original
  1. var $j = jQuery.noConflict();
  2.  
  3. $j(document).ready(function() {
  4.  
  5.  
  6. $j('#formpubli').attr('action', '/mod/publi/back/index.php');
  7. $j('#formdatos').attr('action', '/mod/user/back/php/registrado.php');
  8.    
  9.  
  10. $j( function (){
  11.             //a todos los div con class enclace que sean hijos directo de div con id pesthanas y que no tengan class clase-sel le asigno permito el click
  12.             $j("#pestanhas>div.enlaceuser:not(.enlaceuser-sel)").live('click', function (){
  13.                 //elimino classs clase-sel
  14.                 $j(this).siblings().removeClass('enlaceuser-sel');
  15.                 //agrego class clase-sel al clickeado asi no puede ser clickeado
  16.                 $j(this).addClass('enlaceuser-sel');
  17.                 //Busco el form dentro de la pestaña clickeada
  18.                 form = $j('form', this);
  19.  
  20.         $j(this).ajaxify(
  21.                     {
  22.                         event: false,
  23.                         forms: form,
  24.                         link: form.attr('action'),
  25.                         title: form.attr('title'),
  26.                         target: '#bodydatos',
  27.                         method:'POST'
  28.                     });
  29.             });
  30.         });
  31.  
  32.  
  33.  
  34. });


Un pequeño detalle es que he puesto el atributo action de cada formulario en el archivo de jquery en lugar de en el propio formulario.
Me ayuda a organizarme mejor, pero se podría poner también y perfectamente en el propio formulario.

Código HTML:
Ver original
  1. <div id="pestanhas">
  2.     <div class="enlaceuser enlaceuser-sel"><form method="post"  id="formdatos" title="Datos de usuario" >{TUSDATOS}<input id="autorizado" name="autorizado" type="hidden" value="true" /></form></div>
  3.     <div class="enlaceuser"><form method="post"  id="formpubli" title="Publicidad" >{PUBLICIDAD}<input id="autorizado" name="autorizado" type="hidden" value="true" /></form></div>
  4.        <!--<div class="enlaceuser">{EVENTOS}</div> -->
  5.     <div class="clear"></div>
  6. </div>


Al final se quedan una serie de pestañas que cargan diferentes páginas mediante ajax que se puede adaptar a multitud de usos y facilmente modificable.

Muchas gracias a todos por vuestra ayuda!

Última edición por dalmont; 20/04/2010 a las 05:46
  #9 (permalink)  
Antiguo 20/04/2010, 08:15
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 15 años
Puntos: 101
Respuesta: Selecciona con jquery un id con class concreto

Por que tenes un document.ready dentro de otro?

Cita:
$j(document).ready(function() {
...

$j( function (){
Esas dos funciones son equivalenes, y la segunda sobra.


En cuanto a repetir... no se que es lo que repitas, pero siempre podes usar un bucle y pasarle variables (desde un array, quizas).
  #10 (permalink)  
Antiguo 21/04/2010, 22:56
 
Fecha de Ingreso: febrero-2004
Mensajes: 31
Antigüedad: 20 años, 1 mes
Puntos: 1
Respuesta: Selecciona con jquery un id con class concreto

Cita:
Iniciado por mayid Ver Mensaje
Por que tenes un document.ready dentro de otro?



Esas dos funciones son equivalenes, y la segunda sobra.

Con tanto parentesis y llaves se me coló repetir la misma función.

Código Javascript:
Ver original
  1. // JavaScript Document
  2. var $j = jQuery.noConflict();
  3.  
  4. $j(document).ready(function() {
  5.  
  6.     $j('#formpubli').attr('action', '/modulos/publicidad/back/index.php');
  7.     $j('#formdatos').attr('action', '/modulos/user/back/php/registrado.php');
  8.  
  9.     function clickearEnlace()
  10.     {
  11.         //elimino classs enlaceuser-sel
  12.         $j(this).siblings().removeClass('enlaceuser-sel');
  13.         //agrego class enlaceuser-sel al clickeado asi no puede ser clickeado nuevamente
  14.         $j(this).addClass('enlaceuser-sel');
  15.         //Busco el form dentro de la pestaña clickeada
  16.         form = $j('form', this);
  17.         //Ejecuto la funcion ajaxify con los atributos necesarios
  18.         $j(this).ajaxify({  event: false,
  19.                             forms: form,// formulario que se enviará
  20.                             link: form.attr('action'),// direccion que se carga mediante ajax
  21.                             title: form.attr('title'),
  22.                             target: '#bodydatos',
  23.                             method:'POST'
  24.                         });
  25.     }
  26.  
  27.     //a todos los div con class enclace que sean hijos directo de div con id pesthanas y que no tengan class clase-sel le asigno permito el click
  28.     $j("#pestanhas>div.enlaceuser:not(.enlaceuser-sel)").live('click', clickearEnlace);    
  29. });



Y su respectivo html
Código HTML:
Ver original
  1. <div id="pestanhas">
  2.     <div class="enlaceuser enlaceuser-sel"><form method="post"  id="formdatos" title="Datos de usuario" >{TUSDATOS}<input id="autorizado" name="autorizado" type="hidden" value="true" /></form></div>
  3.     <div class="enlaceuser"><form method="post"  id="formpubli" title="Publicidad" >{PUBLICIDAD}<input id="autorizado" name="autorizado" type="hidden" value="true" /></form></div>
  4.     <!--<div id="peseventos" class="enlaceuser">{EVENTOS}</div> -->
  5.     <div class="clear"></div>
  6. </div>
  #11 (permalink)  
Antiguo 22/04/2010, 07:12
 
Fecha de Ingreso: diciembre-2009
Ubicación: Misiones
Mensajes: 867
Antigüedad: 14 años, 3 meses
Puntos: 65
Respuesta: Selecciona con jquery un id con class concreto

ukix sos dalmont?
  #12 (permalink)  
Antiguo 23/04/2010, 06:07
 
Fecha de Ingreso: febrero-2004
Mensajes: 31
Antigüedad: 20 años, 1 mes
Puntos: 1
Respuesta: Selecciona con jquery un id con class concreto

Cita:
Iniciado por Dany_s Ver Mensaje
ukix sos dalmont?
Si, es que según entro con face o por la cuenta del foro me cambia el nombre.
No me había dado cuenta antes

Etiquetas: selector
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 19:29.