Bonjour, 

Quelle est la version correct de ce script en jQuery svp?

(function() {
	var 	imgs = document.getElementById("img-list").getElementsByTagName("img"),
		imgsCount = imgs.length,
		colCount = 0;

	for (i = 0; i < imgsCount; i++) {
		var 	imgSrc = imgs[i].src,
			newImg = '<img alt="" src="' + imgSrc + '">';
		if (colCount <= 4 ) {
			colCount += 1;
			document.getElementById("col-" + colCount).innerHTML += newImg;
		} else {
			colCount = 1;
			document.getElementById("col-" + colCount).innerHTML += newImg;
		}
	}
})();

Merci!

Salut,

J'aimerais savoir pourquoi tu voudrais le 'transformer' en Jquery ?

Hello,

L'exercice inverse est intéressant, cad jquery vers javascript natif.

Le javascript natif serra toujours plus rapide que jquery.

Le javascript natif serra toujours moins long qu'un script jquery (il ne faut pas oublier le poid de la bib jquery).

On peut déjà écrire ce code un peu mieux en évitant les répétitions. La closure peut aussi être évitée avec forEach.

Array.prototype.forEach.call(
  document.querySelectoAll("#img-list img"),
  function (img, i) {
    var newImg = '<img alt="" src="' + img.src + '">';
    var colIndex = (i % 5) + 1;
    document.getElementById("col-" + colIndex).insertAdjacentHTML("beforeend", newImg);
  }
);

Alors on peut trouver Array.prototype.forEach.call fastidieux à lire et écrire. Rien n'empêche de se créer un raccourci arrEach = Array.prototype.forEach et d'appeler arrEach.call.

J'aime pas trop jQuery, mais je trouve la remarque concernant les performances et la longueur peu à propos. Ce n'est pas une tâche intensive que l'on fait ici, et une lib ou une façon d'écrire qui rend le code plus lisible est toujours appréciable, même quand ça pénalise légèrement les perfs.

Je trouve aussi le but de raccourcir en soit inintéressant. Il faut chercher à écrire du code lisible et maintenable. Je ne suis pas toujours très "standard" dans mon interprétation de ce qui est lisible, j'écris des choses lisibles pour moi, mais globalement j'essaie de mettre en évidence les parties logiques du code.

-
Edité par tabouretBleu 2 janvier 2018 à 9:49:21

Le concept le plus compliqué pour un débutant je pense c'est mon forEach et mon call car il y a une gymnastique au niveau de l'élément sur lequel est exécuté la méthode. forEach ne fonctionne que sur les Array, or querySelectorAll retourne une NodeList statique, donc pour utiliser forEach on triche.

Tu peux trouver des infos là dessus ici:

https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Function/call
https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/forEach

Regarde bien la position des arguments et l'objet sur lequel est exécuté la méthode. Je ne vais pas te faire un cours sur les fondements du Javascript. De toute façon, une fois que tu rentres dans le corps de la fonction anonyme et que tu acceptes que la variable img correspond à la balise <img> et que le i correspond à l'index de l'image dans la liste (comme avec ton for), tu dois pouvoir lire le reste.

Pour le modulo (%), là c'est un concept de maths basique. Je t'invite à tester plusieurs valeurs de i pour te persuader que quand tu arrives à i = 5, 10, 15, 20, etc. le compteur recommence.

Je te laisse regarder insertAdjacentHTML. J'ai voulu montrer une syntaxe alternative, mais ton innerHTML aurait fonctionné. C'est juste moins optimisé et moins extensible.