Récupérer le nombre d'éléments d'une même classe dans un fichier importé

Version imprimable

07/10/2018, 13h18
recycler

Récupérer le nombre d'éléments d'une même classe dans un fichier importé
Bonjour,
(Je débute dans ce domaine)
Je cherche à connaitre le nombre d'élément ".myClass" contenues dans un fichier texte.
pour cela je fais:
Code:

1 2 var myload; $(myload).load("fichierTexte.txt .myClass");
Si j'ai bien compris, c'est un "objet" qui est retourné...Mais après?
".length" retourne "0"
J'en déduis que je ne l'utilise pas comme il faudrait et qu'il me manque quelques notions.
Une petite indication pour me mettre sur la bonne voie?
Merci d'avance.
07/10/2018, 14h52
psychadelic

Tu à du lire la doc de travers.. :?

La méthose Load de jQuery permet de charger un fichier et de la placer à l'intérieur d'un élément DOM de ta page html.
le second argument permet de n'en charger qu'une partie, en se basant sur le principe que le fichier chargé soit au format HTML respectant les règles d'écriture pour les éléments devant se placer entre les balises BODY.

le second argument étant alors la référence de l'id (donc unique) d'un des éléments de ce fichier.

cette méthode ne charge directement pas les éléments d'une même classe.

et attention, cette méthode fait un appel Ajax, elle est donc asynchrone.
Ce qui signifie que tu ne peut tester le résultat de l'opération que dans son callback (ou allrs utiliser les promesses, mais ça va faire compliqué pour toi si tu démarre en JS)

Bonjour,

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$(document).load('fichier.txt',function(ftxt){
	console.log('fichier chargé');
	// 1- on crée un div (masqué), dans lequel on met le contenu
	var temp = $('body').prepend('div').attr('id','temp').css({'display':'none'});
	temp.html(ftxt);
 
	// 2- on compte le nombre d elements ayant la classe 'myClass'
	var myClasses = $('#temp .myClass');
	console.log('nombre .myClass : '+myClasses.length);
 
	// 3a-réaffichage dans le div
	temp.html('');
	myClasses.each( function(thediv){
		temp.append(thediv).css({'display':'block'});
	});
	// 3b- OU : on supprime le div temporaire
//	temp.remove();
});

Ok merci pour la réponse! C'est déjà plus clair concernant "load"
Mon but est de boucler ( for ou while) sur le nombre de "div" ayant pour classe "myClass" présentes dans le fichier, d’où le besoin de connaitre leur nombre et de les placer dans le bon élément en fonction de l' "id" correspondant.

Mon fichier est un simple fichier texte contenant diverses balises:
Code:

1 2 3 4 5 6 7 <div id="sourcesAll"> <div class="sources" id="source_1"> blabla </div> <div class="sources" id="source_2"> blabla </div> <div class="sources" id="source_3"> blabla </div> <div class="sources" id="source_4"> blabla </div> etc.. </div>
Le code suivant fonctionne très bien, mais le problème c'est que je ne connais pas le nb d'incrémentations pour "i", à l'avance vue que le fichier texte est mis à jour dans le temps:
Code:

1 2 3 4 5 6 7 8 var myStringNote=""; var myStringSource=""; for (var i = 1; i <= 4 ; i++) { myStringNote="#note_"+i; myStringSource="fichier.txt #source_"+i; $(myStringNote).load(myStringSource); }
Donc je cherche un moyen pour résoudre ce problème de boucle.
Maintenant si il y a une méthode plus propre pour obtenir le même résultat je suis preneur.

OOPS je viens de voir le message de " jreaux62" je teste et je reviens si je cale ! Merci

Bon, j'ai appliqué la méthode de "jreaux62" à mon code et ça fonctionne très bien ! (merci).
Maintenant j'ai un autre petit soucis:
lorsque ma boucle "for"a fini de placer dans ma page les "div" importées du fichier texte, elles ne s'affichent pas... sauf si je place une "alerte" dans mon code, comme si à la fermeture de l'alerte, cela forçait le rafraichissement de la page...
Code:

1 2 3 4 5 6 7 8 9 10 alert(count); // count = nombre de "div" à importer du fichier var myStringNote=""; var myStringSource=""; for (var i = 1; i <= count ; i++) { myStringNote="#note_"+i; myStringSource="fichier.txt #source_"+i; $(myStringNote).load(myStringSource); }

07/10/2018, 23h19
Invité

Je ne vois rien qui ressemble a mon code...

1- Montre le code complet.

2- et relis le message de psychadelic.

le code:

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
var count;
	 $(window).load('ficheier.txt',function(ftxt){
	console.log('fichier chargé');
	// 1- on met le contenu dans la div #temporaire
	var temp = $('#temporaire').prepend('div').attr('id','temp').css({'display':'none'});
	temp.html(ftxt);
 
	// 2- on compte le nombre d elements ayant la classe '.sources'
	var myClasses = $('#temp .sources');
	console.log('nombre .sources : '+myClasses.length); 
	count=myClasses.length;
	temp.remove();
	loadDoc();  
	loadNotation();
});
 
function loadDoc() {  
	  $("#content_loaded").load("fichier.txt #video_content");
}
 
 
function loadNotation() {
	alert(count+" notes chargées");
	var myStringNote="";
	var myStringSource="";	
 
	for (var i = 1; i <= count ; i++) {
		myStringNote="#note_"+i;
		myStringSource="fichier.txt #source_"+i;
		$(myStringNote).load(myStringSource);
 
		} 
 
}

Citation:

Envoyé par recycler

Maintenant j'ai un autre petit soucis:
lorsque ma boucle "for"a fini de placer dans ma page les "div" importées du fichier texte, elles ne s'affichent pas... sauf si je place une "alerte" dans mon code, comme si à la fermeture de l'alerte, cela forçait le rafraîchissement de la page...

c'est parce que la méthode Load de jQuery est une fonction ASYNCHRONE comme je te l'ai précisé dans mon post précédent.

ça signifie que les instructions qui suivent une commande asynchrone sont exécutés sans attendre que l'instruction asynchrone soit terminée.

le temps que tu lise ton alerte lui laisse le temps de terminer son load, ce qui n'a rien à voir.

Sinon, tu te complique vraiment la vie, tu n'a pas besoin de faire "36" load.

fichier bibi.htm
Code:

1 2 3 4 5 6 <div id="sourcesAll"> <div class="sources"> blabla 1</div> <div class="sources"> blabla 2</div> <div class="sources"> blabla 3</div> <div class="sources"> blabla 4</div> </div>
chargement des notes (changer au besoin le lien vers la libraire jQuery)
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 <!DOCTYPE HTML> <html lang="fr"> <head> <meta charset="UTF-8"> <title>JQuery load</title> </head> <body> <button id="Load_GO">charger les notes</button> <h4>note 4</h4> <div id="Note_4"></div> <h4>note 3</h4> <div id="Note_3"></div> <h4>note 1</h4> <div id="Note_1"></div> <h4>note 2</h4> <div id="Note_2"></div> <script src="jquery3.1.min.js" ></script> <script> $('#Load_GO').click(function() { let $temp = $('<div />'); $temp.load("bibi.htm #sourcesAll", function() { let $All_Notes = $temp.find(".sources"); for ( let i=0; i<$All_Notes.length; i++ ) { $('#Note_'+(i+1)).html( $All_Notes.eq(i).html() ); } }); }); </script> </body> </html>
ça ce règle en moins de 10 lignes de code ( pour juste la partie du load + la variable $temp )

et utiliser des let plutôt que des var, histoire de s'assurer de leur portée et de leur libération mémoire une fois la fonction achevée 8-)

08/10/2018, 10h32
recycler

Merci "psychadelic", pour ces bonnes pratiques ! encore une fois je débute et du coup ça me fait avancer.
J'ai encore des questions sur ce sujet:

- ton code est déclenché dans l'évènement "click" du bouton, je préfère qu'il se déclenche au chargement de la page.
Quelle est la solution la plus adaptée dans ce cas?
$(window).load..?
$(document).load..?
autre chose?

- je vois que tu utilises un fichier ".htm", est-ce un impératif d'utiliser un fichier .htm ou .xml à la place de mon .txt pour un fonctionnement sans surprise? ..dans le cas d'un fichier .htm est-il nécessaire qu'il soit conforme aux règles du html/xhtml : <!DOCTYPE...><html...><head><body> etc... J'ai dans la console un message me disant que mon .txt est un xml "mal formé" ( c'est évident )
est-ce que je peux l'ignorer ou bien est-ce que cela pose un problème?
Bonne journée.
08/10/2018, 10h48
Invité
Bonjour,

1- plutôt que de poser 10000 questions, prends l'habitude de faire une recherche AVANT !
:google:
- "jquery .load()"
- "jquery .ready()"
ENSUITE seulement, pose une question sur ce que tu ne comprends pas.

2- Si tu es débutant en jQuery...
Au lieu de commencer avec un code "complexe", il faut d'abord connaitre les bases.

3- D'autre part, tu nous donnes les informations au fur et à mesure...
Si tu veux vraiment une aide EFFICACE, EXPLIQUE clairement ce que tu veux faire.

Tant qu'à faire, donne-nous un exemple plus CONCRET que "sources", "blabla",... !!

Code:

$("#content_loaded").load("fichier.txt #video_content");

C'est à nous de deviner ??
A priori, ce sont des URL de vidéos ?

Pourquoi fais-tu un fichier .txt, là où un fichier .xml serait tout indiqué ?
- Lire un fichier XML avec jQuery
08/10/2018, 12h23
recycler

Pas de soucis jreaux62 C'est noté, je repasserai avec des questions mieux formulées et quand j'aurai acquis les bases.
Bonne journée
08/10/2018, 12h30
Invité
Le lien que j'ai mis correspond précisément à ta demande.
- LIS le tuto
- FAIS l'exercice
- CHERCHE quand tu ne comprends pas une fonction (.ajax(), .find(), ...)
- reviens avec une qustion sur un point précis
- ...
C'est comme ça que tu progresseras.

Quand tu auras bien compris le principe, le fonctionnement, tu pourras l'ADAPTER à ta problématique. Pas avant.

N.B. Quant à "faire une recherche AVANT de poster" : c'est une des règles du forum.