Selettori gerarchici classe e id

[alemix]

Ho un problema sui selettori...

$(".content_option_dati_contenutocasella > #toggle_option_contenutocasella").click(function(){
			alert('testo');
			if($('~ #toggle_option_contenutocasella',this).attr('class')=='fa fa-caret-square-o-down'){
			   $('~ .content_list_option_dati_contenutocasella',this).show('fast');
			   $('~ #toggle_option_contenutocasella',this).attr('class','fa fa-caret-square-o-up');
			}
			else{
			   $('~ .content_list_option_dati_contenutocasella',this).hide('fast');
			   $('~ #toggle_option_contenutocasella',this).attr('class','fa fa-caret-square-o-down');
			}
		     });

Questo è il mio codice, e dovrebbe essere semplicissimo in teoria, chiedo ad un pulsante di aprire un menù nascosto.

la struttura della mia pagina è

<div .contenutototale>
   <div .barravisibile>scritta e <i #pulsante>pulsante</i></div>
   <div .contenutolistanascosta>
      <div .lista>1</div>
      <div .lista>2</div>
   </div>
</div>

nel codice javascript ho fatto una copia pari pari al mio, però per farvi capire meglio uso i div qua sopra.

per come è ora uso il selettore .contenutototale(padre) > #pulsante(figlio) ma la funzione click non si avvia...

funziona solamente se io cambio il padre con .barravisibile... a quel punto mi fa l'allert() però non esegue nulla, perchè le altre classi sono fuori dal contenitore padre... come posso risolvere? o non ho capito una mazza io?

[Enzaccio]

Guarda che nel BODY si deve scrivere così:

<div class="barravisibile">scritta e <i id="pulsante">pulsante</i></div>

e non:

<div .barravisibile>scritta e <i #pulsante>pulsante</i></div>

[tampertools]

http://mediacreation.it/argo/css-gra...inatore-figlio

[alemix]

Si lo so... era solo un modo più sbrigativo per scrivere...

Cmq ho letto quell'articolo dei selettori... grazie ora ho capito qualche cosina di più finalmente...

$(".contenutototale > .barravisibile").click(function(){
            if($('> #pulsante',this).attr('class')=='fa fa-caret-square-o-down'){
               $('~ contenutolistanascosta',this).show('fast');
               $('> #pulsante',this).attr('class','fa fa-caret-square-o-up');
            }
            else{
               $('~ .contenutolistanascosta',this).hide('fast');
               $('> #pulsante',this).attr('class','fa fa-caret-square-o-down');
            }
             });

Cambiando così il codice funziona... ma funziona in modo diverso da quello che voglio, giustamente nella funziona click viene indicato tutto il div.
E qua sto provando a sistemarmela ma non capisco... penso che il problema sia il this... il codice mi era stato consigliato un po di tempo fa su questo forum, ora che sto andando avanti con lo studio di JS mi è sorto questo dubbio.

This è un selettore che stampa l'oggetto creato in precedenza, di solito lo stampi con this.proprietà o this singolo.

Ora in questo caso se io stampo this mi da [Object HTMLelement]
Se stempo quello contenuto in $('> #toggle_option_contenutocasella',this) invece non riesco a capire cosa contiene... praticamente a che serve? Non mi piace diciamo eseguire comandi senza capirne il perchè...

E altra cosa... sto riscontrando questo problema questo codice qua è contenuto in un'altro div con una funzione Jquery abbastanza simile... se io schiaccio il pulsante di toggle, attivo anche l'altra animazione... come posso escludere?

[tampertools]

Ho corretto i selettori del tuo codice iniziale, prova questo:

$("#toggle_option_contenutocasella").click(function(){
    if($(this).attr('class')=='fa fa-caret-square-o-down'){
       $('~ .content_list_option_dati_contenutocasella',this).show('fast');
       $(this).attr('class','fa fa-caret-square-o-up');
    }
    else{
       $('~ .content_list_option_dati_contenutocasella',this).hide('fast');
       $(this).attr('class','fa fa-caret-square-o-down');
    }
});

In generale:

$('> #elemento-con-id',this)

e

$('#qualsiasi.selettore > #elemento-con-id')

sono UGUALI a

$('#elemento-con-id')

[alemix]

Quindi il this serve solamente a dire solo questo che ho cliccato?

perchè effettivamente una cosa che mi sono dimenticato di dire è che la pagina viene creata dinamicamente caricando i dati dal database quindi ci possono essere più .contenitore-da-visualizzare da assegnare nella pagina. Quindi se clicco uno dei pulsanti mi visualizza il div sottostante e non tutti i div con la stessa classe, tanto che mi sono accorto con le prove di essermi dimenticato

$('.content_list_option_dati_contenutocasella').hide('fast');

subito dopo l'if in modo che se ne apro un'altro mi chiude quello precedente.

Cmq usanto il tuo codice non mi apre il visualizza il div... mi cambia la classe del pulsante ma niente cambio dell'attributo display