Comment extraire tout les id ayant le meme prefix

Version imprimable

Voir 40 message(s) de cette discussion en une page

22/02/2012, 17h16
pierrot10

Comment extraire tout les id ayant le meme prefix
Bonjour à tous,

Dans ul qui l'id="fpp_filter_elements", je souhaite collecter tous les id commençant par fppHeader_ et mettre la deuxième partie dans un array.

Par exemple, si j'ai un élément ayant l'id="fppHeader_categories", j'aimerais que "categories" soit dans un array.

J'ai pensé à faire ceci
Code:

1 2 3 4 $jq("#fpp_filter_elements").find("#fppHeader_" + ?).replace("fppHeader_",""); var a = ["categories", "autre1", "autre2", "autre3", ""];
mais je ne sais pas comment remplacer le ? et je ne suis pas trop certain que je suis dans la bonne voie à 100%.

Pourriez-vous me guider ?

Merci
22/02/2012, 17h37
Bovino

Code:

$('[id^="fppHeader_"]');
22/02/2012, 18h05
pierrot10
Super merci,

Le truc c'est que ca me retorune ceci autant de fois qu'il en trouve
Code:

1 2 3 4 5 6 7 8 9 10 var a = $jq("#fpp_filter_elements").find('[id^="fppHeader_"]'); for (var b = 0; b < a.length; b++) { alert(a[b]); }
object HTMLSpanElement

J'ai encore essayé de faire ceci

Code:

var a = $jq("#fpp_filter_elements").find('[id^="fppHeader_"]').replace("fppHeader", "");

ou

Code:

var a = $jq("#fpp_filter_elements").find('[id^="fppHeader_"]').attr("id").replace("fppHeader","");

Mais sans succès

Bonsoir

Si j'ai bien compris...

Code:

1
2
3
4
5
6
7
// trouver tous les ID commençant par "fppHeader_" dans 
// l'élément d'ID "fpp_filter_elements"
$( "#fpp_filter_elements" ).find( "[id^='fppHeader_']" ).each( i, item ){
	// vous devez alors traiter chaque instance (item) découverte
	// $( item ) pour obtenir un objet jQuery
	var reste = item.id.replace( "fppHeader_", "" );
});

23/02/2012, 00h06
pierrot10

Bonjour,
Merci pour ta réponse, je vais la noter.
En fait, j'ai réalisé que mon idée ne pouvait pas fonctioner, alors je tourne en rond.

En fait, j'ai ceci qui fonctionne.

Code:

$jq("span#fppHeader_" + $jq(this).parent().parent().attr("id").replace("fppSlide_", "")).addClass("active");

Il va monté de 2 crans, prendre la deuxième partie de l'id (du deuxième cran) et attribuer cette valeur à l'id span#fppHeader.

Le problème que j'ai c'est si mon menu à 3 niveaux, ou 4 ou plus, ben le code ci-dessus, ne va pas monter tout en haut. Il va s'arreter à 2 niveau parent et ne pas trouver fppSlide.

Je dois trouve alors comment remonter sans spécifier le nombre de parent, mais de remonter jusqu'au premier fppSlide_ et reprendre replace("sfppSlide","").

J'ai chercher avec parentsUntil, mais j'ai pas réussi.
Auriez-vous une petit idée?

Merci
23/02/2012, 10h06
danielhagnoul

Bonjour

:koi:

Avec les codes (HTML, CSS, JS), j'arriverais peut-être à comprendre la manoeuvre. Pour l'instant, ayant égaré ma boule de cristal, je suis perdu dans un déluge d'ID.
23/02/2012, 10h08
pierrot10
Je ne comprends pas,
même ca, ca ne marche pas
Code:

1 2 $jq(this).prev(".fppAcordeon").css("background-color", "green");
J'ai aussi essayé avec prevUntil()

Au dessus de mes inputs (checkbox) quand je retire une coche ceci est exécuté

Code:

$jq(this).prev(".fppAcordeon").css("background-color", "green");

Et deux-trois niveua plus haut, j'ai ma class fppAcordeon, mais au final, je n'ai pas mon background.

???:?
23/02/2012, 10h09
SpaceFrog

sans voir le code html associé, cela relève comme le dit Daniel de la divination

Voilà, voili,
(le code html se trouve plus bas)
Dans le code si dessous, j'ai plusisuer li class="fpp_level_1" qui ont tous au moin 1 niveau. Celle que je vous montre en en 3 et peut en avoir jusqu'a 4.
Quand je clique sur un

Code:

<input class="fpp_categories" type="checkbox" value="3">

le span id="fppHeader_categoires" prend la class active comme ceci

Code:

<span id="fppHeader_categories" class="fppAcordeon active">

Si je clique sur d'autre input, quelque soit le nombre et le niveau, il garde la classe active, jusqu'a ce que je décoche le dernier input.fpp_categories.

Lorsque je décoche le dernier input.fpp_categories, il perd la class active comme ceci

Code:

<span id="fppHeader_categories" class="fppAcordeon">

Le code jQuery que j'ai hérité fonctionne très bien mais pour un niveau. Si j'en ai plusieur, ca ne marche plus. Alors je cherche une combine pour qu'il ne monte "jusqu'à" et non plus d'un nombre parent fix.
Vous voyer?

Voci le code jQuery que j'ai hérité, que je cherche a adapter:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
 
/*OK*/
	// Si on click dans un cehck box, ajoute la class active au tittre de la section
    $jq(".fppOptions :checkbox").bind("click", function () {
 
		var a = ["categories", "attributes", "manufacturers", "features", "tags"];
		for (var b = 0; b < a.length; b++) {
 
            //Si elle a la class qui comment par LF suivi d'une valeur de a
			if ($jq(this).hasClass("fpp_" + a[b])) {
 
                //Si son attibut est Checké
				if ($jq(this).attr("checked")) {
					//Appel la fonction add() et enregistre la valeur
                    FPPRecord.add(a[b], $jq(this).val());
 
				   // JE SOUHAITE MODIFIER CETTE PARTIE POUR QU?IL PUISSE REMONTER JUSQU'AU PREMIER .fppAcordeon ET AJOUTE LA CLASSE active INDEPENDAENT DU NOMBRE D ELEMENT PARENT
				   $jq("span#fppHeader_" + $jq(this).parent().parent().attr("id").replace("fppSlide_", "")).addClass("active");
 
 
                } else {
                    FPPRecord.remove(a[b], $jq(this).val());
                    // S'il y a plus de checkbox checké, supprime la class active
 
 
					if (FPPRecord.data[a[b]].length == 0 || $jq(this).parent().parent().find(":checked").length == 0) {
 
						// JE SOUHAITE MODIFIER CETTE PARTIE POUR QU?IL PUISSE REMONTER JUSQU'AU PREMIER .fppAcordeon ET remove LA CLASSE active
						$jq("span#fppHeader_" + $jq(this).parent().parent().attr("id").replace("fppSlide_", "")).removeClass("active")
					   //$jq(this).parentsUntil("li.fpp_level_1").removeClass("active");
						//$jq(this).parentsUntil(".fppAcordeon").css("background-color", "green");
 
                    }
                }
            }
        }
 
        FPPRecord.sendRequest()
    });

Voci le code HTML de mon arborescence

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 
<li class="fpp_level_1">
<span id="fppHeader_categories" class="fppAcordeon active">
<span id="Status_categories" class="expanded"> </span>
<b>Categories</b>
</span>
<br>
<ul id="fppSlide_categories" class="fpp_level_2" style="">
<li class="fpp_level_2">
<input class="fpp_categories" type="checkbox" value="3">
Accessoires(3)
</li>
<li class="fpp_level_2">
<input class="fpp_categories" type="checkbox" value="2">
iPods(2)
<ul class="fpp_level_3">
<li class="fpp_level_3">
<input class="fpp_categories" type="checkbox" value="5">
test(5)
<ul class="fpp_level_4">
</li>
</ul>
</li>
<li class="fpp_level_2">
<input class="fpp_categories" type="checkbox" value="4">
Portables(4)
</li>
<li class="fpp_level_2">
<input class="fpp_categories" type="checkbox" value="9">
test(9)
</li>
</ul>
</li>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// on avec 1.7 et + sinon bind()
// un ID doit être unique, on peut donc l'appeler directement
 
$jq( ".fppOptions :checkbox" ).on( "change", function(){
	var a = [ "categories", "attributes", "manufacturers", "features", "tags" ],
		str = this.className.slice( 4 ),
		num = $jq.inArray( str, a ),
		jObj = $jq( this ),
		jObjHeader = $jq( "#fppHeader_" + str );
 
	if ( num > -1 ){
		if ( jObj.prop( "checked" ) ){
			FPPRecord.add( a[b], $jq( this ).val() );
 
			if ( ! jObjHeader.hasClass( "active" ) ){
				jObjHeader.addClass( "active" );
			}
 
		} else {
			FPPRecord.remove( a[b], $jq( this ).val() );
 
			if ( $jq( "#fppSlide_" + str ).find( ":checked" ).length < 1 ){
				jObjHeader.removeClass( "active" );
			}
		}
	}
 
	FPPRecord.sendRequest()
});

23/02/2012, 23h43
pierrot10

Salut,
Je te remercie pour ta réponse,
J'allais me couch donc un peux tard pour étudier ta réponse.
Ceci dit j'ai comme meme fait un copy past de ton code et il me retourne ca

Citation:

Error: $jq(".fppOptions :checkbox").on is not a function
Source File: http://localhost/shop/modules/filter...roductsplus.js
Line: 243

J'étudierai ceci demain plus en profondeur,
Merci beaucoup
23/02/2012, 23h54
danielhagnoul

J'ai pourtant pris la peine de l'écrire ! :fessee: Voir ligne n° 1 ! ;)
23/02/2012, 23h58
pierrot10

oups pardon, mais je n'ai pas compris ce que tu voulais dire. Fais tu allusion à la version?:oops:
23/02/2012, 23h59
pierrot10

Mon cms utilise la version 1.4.4, je pense que c'est ca?
mea culpa, suis un peu largé 8O, là
24/02/2012, 00h01
danielhagnoul

Oui ! Mais on est en 1.7.1 et la 1.7.2 est en phase beta. Il va falloir s'habituer aux méthodes on() et off().

http://api.jquery.com/on/
24/02/2012, 00h04
pierrot10

Mais y a pas moyen d'adapter pour la version antérieur?
Je vais essayer demain d'utiliser la version 1.7, mais....
24/02/2012, 00h08
danielhagnoul

$jq( ".fppOptions :checkbox" ).bind( "change", function(){, c'est pourtant pas du chinois la ligne numéro 1 de mon code !

Ben je l'avais essayé avant de répondre au post,
mais avec le bind, j'ai maintenant ce message:

Citation:

Error: jObj.prop is not a function
Source File: http://localhost/shop/modules/filter...roductsplus.js
Line: 251

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 
 $jq(".fppOptions :checkbox").bind( "change", function(){
		var a = [ "categories", "attributes", "manufacturers", "features", "tags" ],
			str = this.className.slice( 4 ),
			num = $jq.inArray( str, a ),
			jObj = $jq( this ),
			jObjHeader = $jq( "#fppHeader_" + str );
 
		if ( num > -1 ){
			if ( jObj.prop( "checked" ) ){
				FPPRecord.add( a[b], $jq( this ).val() );
 
				if ( ! jObjHeader.hasClass( "active" ) ){
					jObjHeader.addClass( "active" );
				}
 
			} else {
				FPPRecord.remove( a[b], $jq( this ).val() );
 
				if ( $jq( "#fppSlide_" + str ).find( ":checked" ).length < 1 ){
					jObjHeader.removeClass( "active" );
				}
			}
		}
 
		FPPRecord.sendRequest()
});

Je ne sais pas si j'ai fait juste mais j'ai remplacer ceci

Code:

if ( jObj.prop( "checked" ,true) ){

par

Code:

if ( jObj.is( "checked" ,true) ){

et le message d'erreur disparait.
Cependant, je tombe sur un autre problème
le b n'est plus défini

Code:

FPPRecord.add( a[b], $jq( this ).val() );

Donc il bug...;)

J'ai essayer de remettre la boulce

Code:

1
2
 
for (var b = 0; b < a.length; b++) {

Mais san succès.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
    $jq(".fppOptions :checkbox").bind( "change", function(){
		var a = [ "categories", "attributes", "manufacturers", "features", "tags" ],
			str = this.className.slice( 4 ),
			num = $jq.inArray( str, a ),
			jObj = $jq( this ),
			jObjHeader = $jq( "#fppHeader_" + str );
 
		if ( num > -1 ){
 
			if ( jObj.is( "checked" ,true) ){
				FPPRecord.add( a[b], $jq( this ).val() );
 
				if ( ! jObjHeader.hasClass( "active" ) ){
					jObjHeader.addClass( "active" );
				}
 
			} else {
				FPPRecord.remove( a[b], $jq( this ).val() );
 
				if ( $jq( "#fppSlide_" + str ).find( ":checked" ).length < 1 ){
					jObjHeader.removeClass( "active" );
				}
			}
			}
 
 
		FPPRecord.sendRequest()
 
});

Merci pour ton aide et patience :calim2:

24/02/2012, 00h26
danielhagnoul

Même problème, je code pour aujourd'hui et pas avec des méthodes exhumées d'un musée du jQuery :aie:

~~if ( jObj.prop( "checked" ) ){~~ ==> if ( jObj.attr("checked") ) {

Voir 40 message(s) de cette discussion en une page