Selecciona con jquery un id con class concreto

[dalmont]

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

[mayid]

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

[dalmont]

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

[juaniquillo]

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:

<div id="container">
  <a href="#" class="pestana">pesta&ntilde;a 1</a>
  <a href="#" class="pestana">pesta&ntilde;a 2</a>
</div>
 

y el javascript:

Código Javascript:

$(document).ready(function(){
    $('#container a.pestana').click(function(){
        $(this).addClass('.selecrionado').siblings().removeClass('.selecrionado');
        return false;
    })
})
 

Aunque la verdad es que no puedo opinar mucho sin haber visto lo que tienes ya.

[dalmont]

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:

var $j = jQuery.noConflict();
 
$j(document).ready(function() {
 
    var pesactiva="pesdatos";
 
    function apagarActiva( activa)
    {
        activa="#"+activa;
        
        $j(activa).addClass('enlaceuser');
        $j(activa).removeClass('enlaceuser-sel');
    }
 
    function activar(activa)
    {
        $j(activa).addClass('enlaceuser-sel');
        $j(activa).removeClass('enlaceuser');
    }
    
 
$j('#pespubli').click( function()
                        {
                            if( pesactiva!=$j(this).attr('id'))
                            {
                                apagarActiva(pesactiva);
                                activar(this);
                                pesactiva=$j(this).attr('id');
                                
                                $j(this).ajaxify({
                                            event: false,
                                            link :'/modulos/publicidad/back/index.php',
                                            forms:"#formpubli",
                                            target: '#bodydatos',
                                            title:'Publicidad', // change page title. Since v2.0
                                            method:'POST'
                                            });
                            } 
                        }
 
           );
$j('#pesdatos').click( function()
                        {
                            if( pesactiva!=$j(this).attr('id'))
                            {
                                apagarActiva(pesactiva);
                                activar(this);
                                pesactiva=$j(this).attr('id');
 
                                $j(this).ajaxify({
                                            event: false,
                                            link :'/modulos/user/back/php/registrado.php',
                                            forms:"#formdatos",
                                            target: '#bodydatos',
                                            title:'Datos de usuarios', // change page title. Since v2.0
                                            method:'POST'
                                            });
                            } 
                        }
 
           );
 
 
 
});
 

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!

[Dany_s]

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

[dalmont]

Gracias por esta aportación, en cuanto limpie el código y funcione, lo compartiré!!!

[dalmont]

Iniciado por dalmont

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:

var $j = jQuery.noConflict();
 
$j(document).ready(function() {
 
 
$j('#formpubli').attr('action', '/mod/publi/back/index.php');
$j('#formdatos').attr('action', '/mod/user/back/php/registrado.php');
    
 
$j( 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
            $j("#pestanhas>div.enlaceuser:not(.enlaceuser-sel)").live('click', function (){
                //elimino classs clase-sel
                $j(this).siblings().removeClass('enlaceuser-sel');
                //agrego class clase-sel al clickeado asi no puede ser clickeado
                $j(this).addClass('enlaceuser-sel');
                //Busco el form dentro de la pestaña clickeada
                form = $j('form', this);
 
        $j(this).ajaxify(
                    {
                        event: false,
                        forms: form,
                        link: form.attr('action'),
                        title: form.attr('title'),
                        target: '#bodydatos', 
                        method:'POST'
                    });
            });
        });
 
 
 
});
 

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:

<div id="pestanhas">
    <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>
    <div class="enlaceuser"><form method="post"  id="formpubli" title="Publicidad" >{PUBLICIDAD}<input id="autorizado" name="autorizado" type="hidden" value="true" /></form></div>
       <!--<div class="enlaceuser">{EVENTOS}</div> -->
    <div class="clear"></div>
</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!

[mayid]

Por que tenes un document.ready dentro de otro?

$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).

[ukix]

Iniciado por mayid

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:

// JavaScript Document
var $j = jQuery.noConflict();
 
$j(document).ready(function() {
 
    $j('#formpubli').attr('action', '/modulos/publicidad/back/index.php');
    $j('#formdatos').attr('action', '/modulos/user/back/php/registrado.php');
 
    function clickearEnlace()
    {
        //elimino classs enlaceuser-sel
        $j(this).siblings().removeClass('enlaceuser-sel');
        //agrego class enlaceuser-sel al clickeado asi no puede ser clickeado nuevamente
        $j(this).addClass('enlaceuser-sel');
        //Busco el form dentro de la pestaña clickeada
        form = $j('form', this);
        //Ejecuto la funcion ajaxify con los atributos necesarios
        $j(this).ajaxify({  event: false,
                            forms: form,// formulario que se enviará
                            link: form.attr('action'),// direccion que se carga mediante ajax
                            title: form.attr('title'),
                            target: '#bodydatos', 
                            method:'POST'
                        });
    }
 
    //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
    $j("#pestanhas>div.enlaceuser:not(.enlaceuser-sel)").live('click', clickearEnlace);    
});
 

Y su respectivo html

Código HTML:

<div id="pestanhas">
    <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>
    <div class="enlaceuser"><form method="post"  id="formpubli" title="Publicidad" >{PUBLICIDAD}<input id="autorizado" name="autorizado" type="hidden" value="true" /></form></div>
    <!--<div id="peseventos" class="enlaceuser">{EVENTOS}</div> -->
    <div class="clear"></div>
</div>
 

[Dany_s]

ukix sos dalmont?

[ukix]

Iniciado por Dany_s

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