$(this).parent().this undefined !

Version imprimable

hello tous,

je deviens dingue, impossible de selectionner le bon parent !
Code:

1 2 3 4 5 6 7 8 var container = jQuery(this); var parentContainer = $(this).parent(); jQuery.extend(container, { averageRating: settings.value, url: settings.url }); console.log(parentContainer); //[div#Unit_1.blockTypes] console.log(container);//[div#demo1.demo]
après les // des 2 évènements de console sont les résultats.
jusque là, c'est ce que j'ai ...logique.

après :
si je fais :
Code:

1 2 console.log(parentContainer.container);
j'ai undefined pour ce dernier.
si je remplace le . par autre, 'jai des erreurs et mon script ne s'effectue plus.

le code de base ne présente pas de parentContainer.
je suis en train de modifier une fonction déjà existante.
qui prend en compte les div (demoX) d'une boucle pour l'affichage des résultats.
cependant cette boucle est contenue dans une autre boucle.
d'où la récupération de du parent pour que les affichages s'effectuent correctement.

par exemple un bout de code suivant :
Code:

1 2 container.append(ajoutdecontenu);
que j'essaie de transformer en
Code:

1 2 parentContainer.container.append(ajoutdecontenu);
comment puis-je écrire cela?
merci pour votre aide, je galère bien, la doc js m'a aider pour arriver jusque là... mais là je sèche

merci

08/05/2012, 20h10
sekaijin
ceci n'a rien à voir avec javascript c'st un PB JQuery

Merci de le poster dans le bon forum.

container n'est pas un membre de l'élément que te sélection JQuery.

je ne maitrise pas JQuery mais il me semble que container n'est défini que sur certain éléments.
je ne sais pas ce qu'est this mais je suppose qu'il s'agit d'un div
Code:

1 2 var container = jQuery(this); var parentContainer = $(this).parent();
$(this) NE RETOURNE PAS LE DIV MAIS RETOURNE UN OBJeT JQUERY QUI CONTIENT LE DIV
l'appel à $(this).parent() retourne un objet jquery et pas le parent du DIV

Je se sais pas trop ce que tu veux faire mais j'ai l'impression que tu mélange les objet JQuery et les objet du DOM

A+JYT
08/05/2012, 21h59
PadaBen

Merci de ta réponse, ma confusion est très probable, n'y connaissant pas grand chose.

A+
09/05/2012, 11h58
le_chomeur

Bonjour, pourrais tu poster le code html utilisé , ainsi que le code jquery complet ?

merci :)

Bonjour,

MErci de ton intérêt :

html généré par boucle php :

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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
 
<li class="ratingblock">
		1 <strong>entrée 1</strong> : <br />
		<div class="typeLine">
		<div id="RateUnit_1" class="blockTypes">
			<strong>Informatif</strong><div id="demo1" class="demo"></div>
			<strong>Esth&eacute;tique</strong><div id="demo2" class="demo"></div>
			<strong>Absence de Bugs</strong><div id="demo3" class="demo"></div>
			<strong>Originalit&eacute;</strong><div id="demo4" class="demo"></div>
			<strong>Prix</strong><div id="demo5" class="demo"></div>
			<strong>Int&eacute;r&ecirc;t</strong><div id="demo6" class="demo"></div>
		</div>
		<script type='text/javascript'>
			$('#demo1').rater("process.php?o=1&t=1&v=1", {curvalue:4})
			$('#demo2').rater("process.php?o=1&t=2&v=0", {curvalue:4})
			$('#demo3').rater("process.php?o=1&t=3&v=0", {curvalue:4})
			$('#demo4').rater("process.php?o=1&t=4&v=0", {curvalue:4})
			$('#demo5').rater("process.php?o=1&t=5&v=0", {curvalue:0})
			$('#demo6').rater("process.php?o=1&t=6&v=0", {curvalue:0})
		</script></div>
	</li>
<hr />
	<li class="ratingblock">
		2 <strong>Entrée 2<br />
		<div class="typeLine">
		<div id="RateUnit_2" class="blockTypes">
			<strong>Informatif</strong><div id="demo1" class="demo"></div>
			<strong>Esth&eacute;tique</strong><div id="demo2" class="demo"></div>
			<strong>Absence de Bugs</strong><div id="demo3" class="demo"></div>
			<strong>Originalit&eacute;</strong><div id="demo4" class="demo"></div>
			<strong>Prix</strong><div id="demo5" class="demo"></div>
		</div>
		<script type='text/javascript'>
			$('#demo1').rater("process.php?o=2&t=1&v=0", {curvalue:4})
			$('#demo2').rater("process.php?o=2&t=2&v=0", {curvalue:4})
			$('#demo3').rater("process.php?o=2&t=3&v=0", {curvalue:4})
			$('#demo4').rater("process.php?o=2&t=4&v=0", {curvalue:4})
			$('#demo5').rater("process.php?o=2&t=5&v=0", {curvalue:0})
		</script></div>
	</li>
<hr />
	<li class="ratingblock">
		3 <strong>Entrée 3<br />
		<div class="typeLine">
		<div id="RateUnit_3" class="blockTypes">
			<strong>Informatif</strong><div id="demo1" class="demo"></div>
			<strong>Esth&eacute;tique</strong><div id="demo2" class="demo"></div>
			<strong>Absence de Bugs</strong><div id="demo3" class="demo"></div>
			<strong>Originalit&eacute;</strong><div id="demo4" class="demo"></div>
			<strong>Int&eacute;r&ecirc;t</strong><div id="demo6" class="demo"></div>
		</div>
		<script type='text/javascript'>
			$('#demo1').rater("process.php?o=3&t=1&v=0", {curvalue:4})
			$('#demo2').rater("process.php?o=3&t=2&v=1", {curvalue:4})
			$('#demo3').rater("process.php?o=3&t=3&v=1", {curvalue:4})
			$('#demo4').rater("process.php?o=3&t=4&v=1", {curvalue:4})
			$('#demo6').rater("process.php?o=3&t=6&v=0", {curvalue:0})
		</script></div>
	</li>
<hr />
</ul>

et le js , qui fonctionne sous jquery 1.7.0 (appellé chez googleapis)

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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
 
jQuery.fn.rater = function(url, options)
{
	if(url == null) return;
		function getParamValue(param,url) //récup valeur des get url
		{
			var u = url == undefined ? document.location.href : url;
			var reg = new RegExp('(\\?|&|^)'+param+'=(.*?)(&|$)');
			matches = u.match(reg);
			return matches[2] != undefined ? decodeURIComponent(matches[2]).replace(/\+/g,' ') : '';
		}
 
	var voted = getParamValue('v',url);
	//alert(url);
	voted = (voted != '') ? voted : 0;
 
	var settings = {
		url       : url, // post changes to 
		maxvalue  : 10,   // max number of stars
		curvalue  : 0,
		voted 	  : voted
			// number of selected stars
	};
 
	if(options) { jQuery.extend(settings, options); };
	jQuery.extend(settings, {cancel: (settings.maxvalue > 1) ? true : false});
 
	var container = jQuery(this);
	var parentContainer = $(this).parent();
 
	jQuery.extend(container, { averageRating: settings.curvalue, url: settings.url });
 
	console.log(parentContainer); //[div#RateUnit_1.blockTypes]
	console.log(container);//[div#demo1.demo]
 
	//console.log("#RateUnit_\\[1\\]".children("#demo\\[1\\]");
 
	if(!settings.style || settings.style == null || settings.style == 'basic') {
		var raterwidth = settings.maxvalue * 15;
		var ratingparent = '<ul class="star-rating" style="width:'+raterwidth+'px">';
	}
	if(settings.style == 'small') {
		var raterwidth = settings.maxvalue * 10;
		var ratingparent = '<ul class="star-rating small-star" style="width:'+raterwidth+'px">';
	}
	if(settings.style == 'inline') {
		var raterwidth = settings.maxvalue * 10;
		var ratingparent = '<span class="inline-rating"><ul class="star-rating small-star" style="width:'+raterwidth+'px">';
	}
	container.append(ratingparent);
 
	// create rater
	var starWidth, starIndex, listitems = '';
	var curvalueWidth = Math.floor(100 / settings.maxvalue * settings.curvalue);
	for(var i = 0; i <= settings.maxvalue ; i++) {
		if (i == 0) {
			listitems+='<li class="current-rating" style="width:'+curvalueWidth+'%;">'+settings.curvalue+'/'+settings.maxvalue+'</li>';
		} else {
				starWidth = Math.floor(100 / settings.maxvalue * i);
				starIndex = (settings.maxvalue - i) + 2;
				listitems+='<li class="star"><a href="#'+i+'" title="Voter '+i+'" style="width:'+starWidth+'%;z-index:'+starIndex+'">'+i+'</a></li>';
 
		}
	}
	container.find('.star-rating').append(listitems); // i am using find here, because the span wrapped in the small style would break children()
 
 
	if(settings.maxvalue > 1) // add a container for the ajax result
	{
		container.append('<span class="star-rating-result"></span>'); 
	}
	var stars = jQuery(container).find('.star-rating').children('.star');
	//if (voted == 0) 
			stars.click(function()
			{
				if(settings.maxvalue == 1) // on / off
				{
 
					settings.curvalue = (settings.curvalue == 0) ? 1 : 0;
					jQuery(container).find('.star-rating').children('.current-rating').css({width:(settings.curvalue*100)+'%'});
					jQuery.post(container.url, { "rating": settings.curvalue });
					return false;
				}
				else
				{
					//alert (voted);
					settings.curvalue = stars.index(this) + 1;
					//raterValue = jQuery(container).find('.star-rating').children('.star').css({width:(settings.curvalue*100)+'%'});
					raterValue = jQuery(this).children('a')[0].href.split('#')[1];
 
					jQuery.post(container.url, { "rating": raterValue }, function(response){
 
						container.children('.star-rating-result').html(response)
 
					});
 
					return false;
 
				}
 
				return true;
			});
return this; // strict warning: anonymous function does not always return a value. fix?
}

voilà le_chomeur .

ds idées ?
le code présent, mélange l'affichage tout s'affiche sous le RateUnit_1

merci à toi

ok , alors je viens d'analyser ton script et plusieurs erreurs :

- un id doit être UNIQUE
( on retrouve plusieurs fois demo2 demo1 etc )

- Si tu veux travailler avec une arborescence utilise plutôt un parent puis des attributs pour chaque éléments exemple :
Code:

1 2 <strong>Informatif</strong><div id="demo1" class="demo" url="process.php?o=1&t=1&v=1" curvalue="4"></div>
que tu récupéreras de cette façon :
Code:

1 2 3 4 5 6 $('#RateUnit_1').find('.demo').each(function(){ //this fait référence a la div courante dans la boucle var divDemo = $(this); varCurrentCurlValue = divDemo.attr('curvalue'); });
ce qui te permettrais d'optimiser tes appels en une fois et non a chaque bloque !

On va chercher directement sur le parent !
Code:

1 2 3 4 5 6 7 8 $('.ratingblock').find('.demo').each(function(){ //this fait référence a la div courante dans la boucle var divDemo = $(this); varCurrentCurlValue = divDemo.attr('curvalue'); //On va chercher le LI parent var myLiParent = divDemo.parents('li'); });
Voila j'espère que tu auras compris les quelques erreurs que tu as faites :)

10/05/2012, 16h45
PadaBen

hello le_chomeur,
j'ai enfin le temps de me remettre sur ce code .

alors j'ai compris que j'ai plusieurs fois mon id demo et que cela pose un problème.

je comprend que je dois spécifier le parent, c'est ce que je tentais de faire.
dans le code que tu m'as fourni, je comprend la fonction, mais le find(.demo)
ne donne pas l'id de ce demo !, et je me dis qu'il manquera donc de spécifier quel demo reçoit le contenu prévu pour lui !

le 2eme bout de code, je ne comprend ce qu'il fait, mais je ne comprend pas ce qui va faire dans mon code !

et je ne saisi pas encore comment intégrer cela dans mon js !
je vais refaire des tentatives et essayer de comprendre un peu mieux, mais si tu passes par là :) ça serait top

merci :)
bon après midi
P
22/05/2012, 19h07
PadaBen
Citation:

Envoyé par le_chomeur

ok , alors je viens d'analyser ton script et plusieurs erreurs :
un id doit être UNIQUE
( on retrouve plusieurs fois demo2 demo1 etc )

Voila j'espère que tu auras compris les quelques erreurs que tu as faites :)

Hello Le_chomeur
oui, j'ai bien saisi que l'id doit etre unique.
c'est pour cela que je cherche à récupérer les parents de mon this.
je m'y remet enfin, semaine super chargée...

du coup, en fait ce qui bloque c'est que vu que je suis en dynamique, généré par php en sortie de bdd, je ne peux pas spécifier directement le parent, puisque il y a une id 'RateUnit_1" où 1 est l'id du parent justement..

et ensuite, j'ai une autre id, celle de "div#demo1" où 1 est aussi une idée, mais différente de celle de RateUnit.

est ce que si je selectionne par la class, cela prendra tout de même l'id du parent du présent this en compte

dans mon code déjà ecrit, il y a :
Code:

1 2 var container = jQuery(this);
dans ma fonction, et tout le reste du code part de ce container là
pour cela j'aimerai modifier juste ce container, histoire que directement tous les this derrière avec l'allocution container, seront directement modifiés.

pourquoi ne puis-je pas mettre :
Code:

1 2 3 var parentContainer = $(this).parent(); var container = parentContainer.jQuery(this);
merci de ton aide :)
01/06/2012, 01h01
PadaBen

voilà c'est résolu

info qui m'a aidé c'est

Citation:

un id doit être UNIQUE

merci
je met en résolu.

^^