Pas de children après un append

**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

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.

Pas de children après un append

jQuery

Vue hybride

Discussions similaires

Partager

Partager