Pas de children après un append

Version imprimable

Bonjour,

Voici un bout de code jquery tout bête :
Code:

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

11/05/2011, 11h48
Bovino

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

Code:

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>

11/05/2011, 11h57
quasinewbie

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').
11/05/2011, 12h16
Bovino

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 ? :aie:
11/05/2011, 12h42
quasinewbie

$('body') :mouarf:
Merci pour ce magistral cours :D

Bonjour

À toutes fins utiles :

Code:

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.