[Résolu] Selection d'un élément

Bonjour.

En fait je ne vois pas ce qui ne fonctionne pas :
http://jsfiddle.net/4ezp27rq/

Merci de ta réponse,

en faite si je multiplie les <div class="accordeon_sous_menu"> & <div class="container accordeon_rubriques_pages" id="element_04"> pour créer plusieurs lignes avec des zones qui s'ouvrent, les boutons <a> n'ouvrent pas leurs enfant respectifs mais la div avec element_

Bonjour,

blond1n a écrit :
les boutons <a> n'ouvrent pas leurs enfant respectifs mais la div avec element_

On est d'accord que la div id="element_04" n'est pas la fille du <a> cliqué hein ?

On est aussi d'accord sur le fait que

$("div[id^='element_']:first").slideToggle(1000);

va sélectionner le premier élément div avec un id commençant par "element_" et que peu importe le nombre de div "element_", peut importe leur numéro et peut importe le <a> cliqué il prendra toujours le premier élément div avec un id commençant par "element_" ?

Je suis d'accord que la div id="element_04" n'est pas la fille du <a> cliqué. Ben je ne sais pas comment je peux appeler cet élément div qui est en dessous de la div que l'on clique.

Pour la sélection de la div :

$("div[id^='element_']:first").slideToggle(1000);

j'avais rajouté un this,

$("div[id^='element_']:first", this).slideToggle(1000);

mais ça ne marche plus, aucun mouvement.

$("div[id^='element_']:first").slideToggle(1000);

devrait réagir avec le <a> supérieur de la div.. .

 $('.accordeon_rubrique').click(function(){ 

mais je ne pige comment je dois faire

blond1n a écrit :
Je suis d'accord que la div id=&quot;element_04&quot; n'est pas la fille du &lt;a&gt; cliqué. Ben je ne sais pas comment je peux appeler cet élément div qui est en dessous de la div que l'on clique.

La div #element_04 est soeur de la div .accordeon_sous_menu
(EDIT : Elle est sœur du parent de l’élément cliqué hein, elle est pas "de la div que l'on clique")

blond1n a écrit :
$("div[id^='element_']:first").slideToggle(1000);
devrait réagir avec le &lt;a&gt; supérieur de la div..
.$('.accordeon_rubrique').click(function(){
mais je ne pige comment je dois faire

A partir de la ça devient un peu flou.

En gros si j'ai bien compris ce que tu veux c'est :
- avoir plusieurs <a>
- avoir plusieurs <div> chacune reliée a un <a>
- quand on clique sur un <a> ça ouvre la <div> correspondante

Si c'est bien ça il te manque le lien entre le <a> et la <div>. La <div> n’étant pas fille du <a> tu ne peut pas y accéder simplement, il te faut donc relier le <a> et la <div> autrement, comme par exemple donner un attribut data pour lui dire quelle div bouger : http://jsfiddle.net/4ezp27rq/2/

[EDIT`] Petites précisions sur les attributs data http://www.alsacreations.com/article/lire/1397-html5-attribut-data-dataset.html et http://caniuse.com/#feat=dataset
Modifié par _laurent (09 Sep 2014 - 12:33)

Ce que tu as fait correspond à ce que je veux faire ! je ne pige ton code pour le coup.. .

Je pensais que je pouvais demandé de la même manière que pour :

$(".zone_titre_sous_menu",this).toggleClass("zone_titre_sous_menu_active");

, je clique sur <a>, il modifie la class..zone_titre_sous_menu qui lui appartient...

On peu pas sélectionner la div ou class qui suit une div ? mais que la div suivante ?

ex :

<div> <a></a></div><div><span>blabla</span</div>
<div> <a></a></div><div><span>blabla</span</div>

ok.

Et je ne peux pas demander à ma function la sélection de la div suivante qui commence par element_ ?

Arf j'ai cliqué trop vite désolé. Je poursuis.

Tu ne pourras pas sélectionner la div sœur avec

$("#element_01",this)

vu que la div n'est pas dans this.

Il faut donc passer par ailleur. Dans le code que j'ai fait rapidement le <a> qu'on clique a un attribut data-* qui donne le numéro de la div a afficher :

<a class="accordeon_rubrique" href="#" data-num="1">

Ensuite dans le JS je sélectionne la div correspondante en associant le début de l'id "element_0" au numéro ce qui donnera par exemple : element_01

$("#element_0" + this.dataset.num)

ce qui reviens à un

$("#element_01")

et la il cherche dans la page un element avec l'id element_01

blond1n a écrit :
ben l’accordéon est bien mais je ne veux pas que les autres zones se ferment.. je trouve ça un peu chiant pour certaines utilisations.

Ah, je crois voir a peut près ou tu veux en venir (dis moi si je me plante). Pourquoi ne pas faire un truc du genre :

<div class="container">
    <a>toto</a>
    <p>content</p>
</div>
<div class="container">
    <a>tata</a>
    <p>content</p>
</div>

avec en css un truc du genre

.container p{
display:none;
}

et en Js au clic sur une div tu slide son <p> fils

$(document).ready(function(){
    $('.container').click(function(){
        $("p",this).slideToggle(1000);
		return false;
	});	
});

Ou un truc dans le genre...?
Modifié par _laurent (09 Sep 2014 - 13:03)

c'est exactement ça.. .

je peux mettre ça sur un <a> ? avec mes autres actions sur ma div ?

$("span:first", this).toggleClass("dropdown_accordeon_vivre_ici_second");
					$(this).parent(".accordeon_sous_menu").toggleClass("accordeon_sous_menu_active");
					$(".zone_titre_sous_menu",this).toggleClass("zone_titre_sous_menu_active");	

Zut je fout le bordel avec mes tentatives d'édition

Pourquoi vouloir compliquer le truc ? Il vaut mieux éviter de jongler entre parent et enfant.
Que veux-tu rajouter comme action sur le div ? Un simple changement de classe ? met le a coté dans le Js no ?

[EDIT] comme ça : http://jsfiddle.net/qpstznL5/1/
Modifié par _laurent (09 Sep 2014 - 13:11)