Append sur des éléments fils d'un accordion.

**Bensljul** · 30/08/2019, 14h03

Bonjour à tous,

J'aimerais rajouter des élément en cliquant sur le bandeau d'un accordion, je m'explique :

voici mon code html :

Code HTML :

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
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<body>
<div class="acc">
				<h2 value="Coeur">JBOSS COEUR</h2>
				<div class="table">
				</div>
				<h2 value="F1">Connexe F1</h2>
				<div class="table">
					<table >
					</table>
				</div>
				<h2 value="F2F3">Connexe F2F3</h2>
				<div class="table">
					<table >
					</table>
				</div>
				<h2 value="F6">Connexe F6</h2>
				<div class="table">
					<table >
					</table>
				</div>
				<h2 value="F11">Connexe F11</h2>
				<div>
					<table class="table" >
					</table>
				</div>
				<h2 value="F13">Connexe F13</h2>
				<div>
					<table class="table" id="F13">
					</table>
				</div>
				<h2 value="F16">Connexe F16</h2>
				<div class="table">
					<table >
					</table>
				</div>
				<h2 value="BDD">Bases de données</h2>
				<div class="table">
					<table >
					</table>
				</div>
</div>
</body>

l'accordion est réalisé grâce a jquery-ui par cette ligne :$('#acc').accordion(); et je souhaite que lorsque l'on clique sur un des bandeaux; cela rajoute un "coucou" dans le '.table'
j'ai essayé plusieurs solution mais qui ne fonctionne pas XD :

Code :

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

1
2
3
4
5
$('h2').on('click',function(){
	$table=$(this).find('.table');
		$table.children().append('coucou');
		$(this).children('.table').children().append('coucou');
	});

Je continue a chercher par moi même mais si quelqu'un peut m'éclairer, je prends avec plaisir

Invité · 30/08/2019, 14h39

Bonjour,

1- <div class="table"> n'est pas "enfant" de <h2>, mais le "suit immédiatement" : .next()

Code :

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

	$table=$(this).next('.table');

2- Ensuite, il faut respecter la structure HTML d'une <table> !

Code :

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

1
2
3
4
$('h2').on('click',function(){
  var table = $(this).next('.table').find('table'); // cible la balise <table> de l'élément de classe ".table" suivant ceci
  table.append('<tr><td>coucou</td></tr>');
});

Ou :

Code :

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

1
2
3
4
$('h2').on('click',function(){
  var table = $(this).next('.table').find('table'); // cible la balise <table> de l'élément de classe ".table" suivant ceci
  table.append($('<tr>').append($('<td>').append('coucou')));
});

Append sur des éléments fils d'un accordion.

jQuery

Discussions similaires

Partager

Partager