Pas de children après un append [Résolu]

quasinewbie · 11/05/2011, 11h38

Bonjour,

Voici un bout de code jquery tout bête :

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
(function ($) {
  $.fn.myfunc = function (params) {
    ...
    var myId = 'id_' + params.id;
    var myDiv = $('<div></div>').attr("id", function () { return '' + myId; });
    $(this).append(myDiv); 
    $('div[id^="id_"]').css('display', 'block');
  });
});
 
 
$(document).ready(function () {
  $('#body').myfunc({
    id: 'coucou'
  });
});

J'imagine que ce code devrait créer une <div> dans mon <body>

Quand je fais une alert(myDiv.attr('id')); c'est ok j'ai bien "id_coucou"
Mais quand je fais alert($(this).children().length); j'obtiens 0, $this n'a pas de children ?!?

Et autre question : comment bien utiliser le selector pour y appliquer un css ? Je voudrais qqchose comme ça
$('div[id="id_coucou"]').css('display', 'block');
Mais avec id_coucou plus générique, du genre "id_"+params.id

Bovino · 11/05/2011, 11h48

Poses-toi d'abord la question de savoir à quoi correspons $(this) dans ton code

SpaceFrog · 11/05/2011, 11h53

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script type="text/javascript">
 
  $.fn.myfunc = function (params) {
    	var myId = 'id_' + params.id;
    	var myDiv = $('<div></div>').attr("id", myId);
    	$(this).append(myDiv); 
    	$('div[id^="id_"]').css({'display':'block'});
  		};
 
 $(function () {
  $('body').myfunc({
    id: 'coucou'
  });
});
</script>
</head>
<body>
<input type="button" onclick="alert($('body').children('div').length)" value="go" />
</body>
</html>

quasinewbie · 11/05/2011, 11h57

Vu que dans $(document).ready(function () {...}) j'appelle myfunc avec $('#body'), je dirais donc que $(this) c'est $('#body'), non ?

En fait je développe ce pluggin pour pouvoir à terme faire plusieurs appels, pour l'instant donc j'appelle avec $('#body') mais après validation de cette méthode, je compte pouvoir écrire :
$('#myDiv1').myfunc('coucou');
$('#myDiv2').myfunc('hello');

Donc j'imagine alors que $(this) sera respectivement $('#myDiv1') puis $('#myDiv2').

Bovino · 11/05/2011, 12h16

Citation:

Envoyé par quasinewbie

j'appelle myfunc avec $('#body'), je dirais donc que $(this) c'est $('#body'), non ?

Oui, et la question subsidiaire est : as-tu dans ta page un élément dont l'id est body ?

quasinewbie · 11/05/2011, 12h42

$('body')

Merci pour ce magistral cours

danielhagnoul · 12/05/2011, 10h01

Bonjour

À toutes fins utiles :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script>
	(function($){
		$.fn.myfunc = function(params){
			return this.each(function(i, item){
				$("<div/>", {
					"id": "id_" + params.id,
					"css": {
						"display": "block"
					}
				}).appendTo(item);
			});
		};
	})(jQuery);
 
	$(function(){
		$("body").myfunc({
			"id": "coucou"
		});
	});
</script>

Je vous recommande la lecture de la FAQ jQuery.

11/05/2011, 11h48	#2
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 806 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 806 Points : 35 803 Points : 35 803	Poses-toi d'abord la question de savoir à quoi correspons $(this) dans ton code __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

11/05/2011, 11h57	#4
quasinewbie Invité de passage r&d Inscription : avril 2011 Messages : 13 Détails du profil Informations personnelles : Sexe : Localisation : France, Ille et Vilaine (Bretagne) Informations professionnelles : Activité : r&d Informations forums : Inscription : avril 2011 Messages : 13 Points : 2 Points : 2	Vu que dans $(document).ready(function () {...}) j'appelle myfunc avec $('#body'), je dirais donc que $(this) c'est $('#body'), non ? En fait je développe ce pluggin pour pouvoir à terme faire plusieurs appels, pour l'instant donc j'appelle avec $('#body') mais après validation de cette méthode, je compte pouvoir écrire : $('#myDiv1').myfunc('coucou'); $('#myDiv2').myfunc('hello'); Donc j'imagine alors que $(this) sera respectivement $('#myDiv1') puis $('#myDiv2').
	00

11/05/2011, 12h42	#6
quasinewbie Invité de passage r&d Inscription : avril 2011 Messages : 13 Détails du profil Informations personnelles : Sexe : Localisation : France, Ille et Vilaine (Bretagne) Informations professionnelles : Activité : r&d Informations forums : Inscription : avril 2011 Messages : 13 Points : 2 Points : 2	$('body') Merci pour ce magistral cours
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email