Comment extraire tout les id ayant le meme prefix [Résolu]

[pierrot10]

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

[Bovino]

Code :

$('[id^="fppHeader_"]');

[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

[danielhagnoul]

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_", "" );
});

[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

[danielhagnoul]

Bonjour



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.

[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.

???

[SpaceFrog]

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

[pierrot10]

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 HTML :

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

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

Code HTML :

<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 HTML :

<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 JQUERY :

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 HTML :

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>

[danielhagnoul]

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()
});

[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

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

[danielhagnoul]

J'ai pourtant pris la peine de l'écrire ! Voir ligne n° 1 !

[pierrot10]

oups pardon, mais je n'ai pas compris ce que tu voulais dire. Fais tu allusion à la version?

[pierrot10]

Mon cms utilise la version 1.4.4, je pense que c'est ca?
mea culpa, suis un peu largé , là

[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/

[pierrot10]

Mais y a pas moyen d'adapter pour la version antérieur?
Je vais essayer demain d'utiliser la version 1.7, mais....

[danielhagnoul]

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

[pierrot10]

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

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()
});

[pierrot10]

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

[danielhagnoul]

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

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