ajouter ID avec un compteur [Résolu]

[SuperArbre]

Bonjour à tous,

Je suis débutant en JS et jquery et je voudrais exécuter un script qui ajoute un id différent à plusieurs DIV de class identique:

Code :

1
2
3
4
5
6
7
8
9
 
<div id="content">
<div class="categories">
</div>
<div class="categories">
</div>
<div class="categories">
</div>
</div>

Code :

1
2
3
4
5
6
7
8
9
10
11
 
 
	function countPicturesByCat(){
	var nbCategories=$("div.categories").length;
	var cpt=0;
 
 
	while(cpt<nbCategories){
		$("div.categories").attr("id","categorie"+cpt);
		cpt=cpt+1;
		};

Mon code ne fonctionne pas car il sélectionne toujours toutes les DIV…
Je voudrais savoir si possible, comment faire pour tester si une DIV possède déjà un ID… Je suis preneur de n'importe quelle ébauche de code!

D'avances, merci beaucoup pour vos réponses!
Pas toujours facile de débuter

Bonne semaine à tous

[BaBeuH]

Bonjour,

Pour cela, tu peux utiliser les sélecteurs jQuery, div.categories:not([id]) qui te permet de récupérer permet les éléments div ayant la classe "categories" et n'ayant pas d'attribut id.

Ensuite, une bonne pratique par rapport à l'accès aux élément du dom, stocke les résultats dans une variable. Cela t'évite d'accéder plusieurs fois à l'arbre DOM.

Code :

1
2
3
4
5
 
function countPicturesByCat(){
	var categories = $("div.categories:not([id])");
	var nbCategories = categories.length;
	...

Ensuite, pour l'attribution des id, je ne sais pas si ta boucle avec un compteur est le moyen le plus "fiable"... si jamais des éléments de ton dom sont supprimés, tu pourrais réattribuer des id déjà présents...

Code :

1
2
3
4
5
6
7
8
9
 
var idGenerateur = 0;
function countPicturesByCat(){
	var categories = $("div.categories:not([id])");
	var nbCategories = categories.length;
        categories.each(function(index,valeur){
                $(this).attr("id",idGenerateur);
                idGenerateur++;
        });

Peut-être que stocker une variable "globale" que tu incrémentes à chaque fois est une solution plus appropriée. Certes, la manipulation de variable globale n'est pas trés propre, mais je ne suis pas sur qu'il y ait un moyen véritablement "propre"...

A+

[Bovino]

Surtout, tu sembles ne pas avoir encore bien compris comment fonctionne jQuery.

Code :

$("div.categories")

va sélectionner tous les éléments dont la classe est "categories" et les stocker dans un objet jQuery.
Ensuite, lorsque tu fais

Code :

$("div.categories").attr("id","categorie"+cpt);

tu appliques à tous les éléments sélectionnés la méthode attr(), donc dans ton cas, à chaque itération, tu affectes le même id à tous tes éléments.

Ensuite, la boucle n'est effectivement pas la meilleure idée, il est préférable d'utiliser celle prévue par jQuery : each().

@BaBeuh : à quoi ça sert de passer par une variable incrémentée alors que c'est précisément le rôle du 1er paramètre de each() de servir de compteur

Code :

1
2
3
$('.categories').each(function(index){
    $(this).attr('id','categorie'+index);
});

[BaBeuH]

@Bovino, J'envisageais le cas où il y a un ajout d'élément dans le DOM, et donc l'exécution "multiple" de la fonction générerait des id identiques en utilisant l'index de la boucle...

Si cette fonction n'est exécutée qu'une fois, lorsque le DOM est chargé, effectivement, cela convient parfaitement sans s'encombrer d'une variable globale.

[SuperArbre]

Bonjour,

Merci beaucoup pour vos conseils! Effectivement je n'ai encore pas tout compris et c'est peu dire! D'ici la semaine prochaine je vais faire des tutos JS et jquery…

C'est sympa d'avoir mis des bouts de codes que j'ai pu tester!

Bonne semaine.

[SuperArbre]

Bonjour à tous,

Je suis me suis que le seul moyen de vraiment comprendre c'était d'essayer! Et bien j'aurais pas dû car je crois que je fais toujours faux

Cette fois un problème légèrement différent

1) pour chaque Div de class catégories-> calculer le nombre d'images
2) donner la catégorie qui contient le plus d'images
3) adapter la taille en fonction

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
// ajustement en fx du nbre d'images
 
	function countPicturesByCat(){ // créer une fonction qui calcul les éléments IMG
	var nbPicture=$("img").length;
	return nbPicture;
	};
 
 	var categories=$("div.categories");
 
    	categories.each(function(index,valeur){ // pour chaque catégories appeler la fonction countPicturesByCat
                var nombre=$(this).nbPicture;
        });
    var taille=200px/nombre; // diviser la taille par le nombre
    $("div.photo img").css("width","taille"); // appliquer variable taille en CSS

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<div id="content">
<div class="categories">
<a href="images/galerie/ensembles/01.jpg"><img alt="concert" title="concert" src="images/galerie/ensembles/vignettes/01.jpg" /></a>
<a href="images/galerie/ensembles/01.jpg"><img alt="concert" title="concert" src="images/galerie/ensembles/vignettes/01.jpg" /></a>
</div>
<div class="categories">
<a href="images/galerie/ensembles/01.jpg"><img alt="concert" title="concert" src="images/galerie/ensembles/vignettes/01.jpg" /></a>
</div>
<div class="categories">
<a href="images/galerie/ensembles/01.jpg"><img alt="concert" title="concert" src="images/galerie/ensembles/vignettes/01.jpg" /></a><a href="images/galerie/ensembles/01.jpg"><img alt="concert" title="concert" src="images/galerie/ensembles/vignettes/01.jpg" /></a><a href="images/galerie/ensembles/01.jpg"><img alt="concert" title="concert" src="images/galerie/ensembles/vignettes/01.jpg" /></a>
</div>
</div>

En bref, il y a du juste mais aussi des fautes et je n'arrive pas à les trouver!

Si quelqu'un peu m'aider ce serait génial…! Merci à tous pour votre lecture.

Très bonne journée et meilleures salutations.