Partage

Convertir ce petit script en jQuery

1 janvier 2018 à 22:23:24

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! :)

Vous êtes demandeur d'emploi ?
Sans diplôme post-bac ?

Devenez Développeur web junior

Je postule
Formation
en ligne
Financée
à 100%
2 janvier 2018 à 0:00:58

Salut,

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

Si vous voulez me mp, venez sur Discord (username: Stelyus#8984)
2 janvier 2018 à 0:22:15

Je voudrais voir si ce serait plus intéressant au niveau de la longueur ou pas. Je me fais des exos comme ca mais je sèche là
2 janvier 2018 à 9:02:26

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

Un petit +1 si je vous ai aidé est toujours appréciable :).
2 janvier 2018 à 9:40:03

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

2 janvier 2018 à 12:23:40

Merci tabouretBleu. Est ce j'ose te demander de m'expliquer ce que tu as écrit stp? Je suis pas du tout...
2 janvier 2018 à 18:07:48

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.

Convertir ce petit script en jQuery

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
  • Editeur
  • Markdown