append données xml avec itération

Je crois que je suis vraiment pas loin de la solution...

Mais je pense avoir quelques problèmes avec la façon dont l’écrire. Notamment sur la hiérarchisation de mes fonctions et sur comment bien récupérer mes variables.

Je pense que la logique du code est bonne. Elle devrait permettre d'insérer les éléments à l affichage de la page et de pouvoir en insérer d’autres via un clique.

Avec ce code j arrive à choisir le nombre d'élément que je souhaite afficher au chargement de la page :

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
function init(){
 
    $.get('data.xml', function (d){
 
			var count = $(d).find("element").size();
			var last = $(d).find("element").first().attr("id");
			var nbOfelemet = 5;
			var nbToappend = last - nbOfelemet;
			alert(count);
			alert(last);
 
$(d).find('element').each(function (){		
 
			var $element = $(this);
			var id = $element.attr("id");
			var size = $element.attr("size");
			var category = $element.attr("category");
			var urlpage = $element.find('urlpage').text();
            var urlimage = $element.find('urlimage').text();
            var title = $element.find('title').text();		
 
 
 
var $newelement = $('<div class="element '+ size +' '+category +'" id="_'+id+'"></div>').html('<a class= "link" href="' + urlpage + '"><img  src="' + urlimage + '" class="thumbnail" />' + '<div>' + '<span>' + '<i class="icon-pencil"></i>' + '&nbsp;&nbsp;' + title + '</span><span class="more">more.</span></div></a></div>');
 
$container.isotope( 'insert', $newelement)
 
var last = id;
return ( id != nbToappend);
 
		});
		initIsotope();
 
	});
}

Seulement si je veux pouvoir utiliser ce code avec un clique, je dois sortir les variables count et last afin de sélectionner les prochains éléments à insérer avec un clique.

J'ai essayé ça mais plus rien ne marche :

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
38
39
40
41
42
43
44
45
46
function atfirst(){
$.get('data.xml', function (d){
	var count = $(d).find("element").size();
	var last = $(d).find("element").first().attr("id");	
	var nbOfelemet = 5;
	var nbToappend = last - nbOfelemet;	
	alert(count);
	alert(last);
	alert(nbToappend);
});
}
 
atfirst();		
init();	
 
function init(){
 
$.get('data.xml', function (d){
 
			var nbOfelemet = 5;
			var nbToappend = last - nbOfelemet;
			alert(nbToappend);
 
 
$(d).find('element').each(function (){		
 
			var $element = $(this);
			var id = $element.attr("id");
			var size = $element.attr("size");
			var category = $element.attr("category");
			var urlpage = $element.find('urlpage').text();
            var urlimage = $element.find('urlimage').text();
            var title = $element.find('title').text();		
 
var $newelement = $('<div class="element '+ size +' '+category +'" id="_'+id+'"></div>').html('<a class= "link" href="' + urlpage + '"><img  src="' + urlimage + '" class="thumbnail" />' + '<div>' + '<span>' + '<i class="icon-pencil"></i>' + '&nbsp;&nbsp;' + title + '</span><span class="more">more.</span></div></a></div>');
 
$container.isotope( 'insert', $newelement)
 
var last = id;
alert(id);			
return ( id != nbToappend);
 
		});
		initIsotope();		
	});
}

C'est qu'une histoire d'écriture du code, d'organisation. Je ne sais pas bien comment le saisir. En tout cas je pense que la logique devrait permettre de faire ce que je souhaite.

En espérant que l'on puisse m'aider.