Comment rafraichir mon CSS ou faire un append sur plusieurs class

**pierrot10** · 10/02/2017, 20h10

Bonjour à tous,

Je fais un site avec jqueymobile et he cherche a construire dynamiquement un sous menu.

Avec jqueymobile, la base d'un site est le suivant

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
 
<body>
 
<!-- Start of first page -->
<div data-role="page" id="foo">
<div data-role="panel" id="mypanel-b">
    <!-- panel content goes here -->
</div><!-- /panel -->
	<div data-role="header">
		<h1>Foo</h1>
	</div><!-- /header -->
 
	<div role="main" class="ui-content">
		<p>I'm first in the source order so I'm shown as the page.</p>
		<p>View internal page called <a href="#bar">bar</a></p>
	</div><!-- /content -->
 
	<div data-role="footer">
		<h4>Page Footer</h4>
	</div><!-- /footer -->
</div><!-- /page -->
 
<!-- Start of second page -->
<div data-role="page" id="bar">
<div data-role="panel" id="mypanel-c">
    <!-- panel content goes here -->
</div><!-- /panel -->
	<div data-role="header">
		<h1>Bar</h1>
	</div><!-- /header -->
 
	<div role="main" class="ui-content">
		<p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my id is beeing clicked.</p>
		<p><a href="#foo">Back to foo</a></p>
	</div><!-- /content -->
 
	<div data-role="footer">
		<h4>Page Footer</h4>
	</div><!-- /footer -->
</div><!-- /page -->
</body>

Comme vous le constaté, il y aun panel pour chaque page

Code HTML :

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

1
2
3
4
5
6
 
<div data-role="panel" id="mypanel-b">
   <ul id="fence-btns">
</ul>
    <!-- panel content goes here -->
</div><!-- /panel -->

Dans ce panel on ajoute un menu avec des ul et li.

Premierement, j'aimerais avoir le meme menu dans chaque panel, donc j0aimerais éviter de codé trois fois (ou plus) la meme chose.

Mon problème n'est pas là. Je construit un sous menu dynmiquement en fonction du contenu d'une page. C'est une boucle qui va ajouter ce code

Code JQUERY :

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

1
2
 
$('#fence-btns').append( '<li data-icon="location"><a href="#home" class="fence-btn" data-center="[' + feature.geometry.coordinates[0][0][0] +','+ feature.geometry.coordinates[0][0][1] + ']" data-points="'+ JSON.stringify(feature.geometry.coordinates) +'">' + feature.properties.name + '</a></li>' );

Le prblème c'est qu'on peut n'avoir qu'un ID par page, et dans mon cas j'aurais trois fois ceci:

Code HTML :

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

1
2
3
 
<ul id="fence-btns">
</ul>

Donc... bud.

J'ai donc modifier de la sorte

Code HTML :

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

1
2
3
 
<ul class="fence-btns">
</ul>

Code JQUERY :

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

1
2
 
$('.fence-btns').append( '<li data-icon="location"><a href="#home" class="fence-btn" data-center="[' + feature.geometry.coordinates[0][0][0] +','+ feature.geometry.coordinates[0][0][1] + ']" data-points="'+ JSON.stringify(feature.geometry.coordinates) +'">' + feature.properties.name + '</a></li>' );

Je ne suis pas convaicu ce ceci car 1), le CSS n'est pas appliqué au sous-menu!!!
Ce qui me semble logique puis que ma page n'est pas rechargée, n'es-ce pas?

Y-a-t-il la possibilité de rafraichir le CSS sans rafraichir la page?
Si non, pour appliqu le dernier code a tous mes '.fence-id', es-ce bien jsute de le faire ainsi?
Y-a- pas un truc du genre each()?

Merci pour vos lumières

**NoSmoking** · 12/02/2017, 14h32

Bonjour,

Je ne suis pas convaicu ce ceci car 1), le CSS n'est pas appliqué au sous-menu!!!
Ce qui me semble logique puis que ma page n'est pas rechargée, n'es-ce pas?

Non ... aucune raison si les sélecteurs sont correctement renseignés dans ton CSS.

**SpaceFrog** · 13/02/2017, 08h20

Code :

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

$('.fence-btns').each( function(){append( '<li data-icon="location"><a href="#home" class="fence-btn" data-center="[' + feature.geometry.coordinates[0][0][0] +','+ feature.geometry.coordinates[0][0][1] + ']" data-points="'+ JSON.stringify(feature.geometry.coordinates) +'">' + feature.properties.name + '</a></li>' ); });

**NoSmoking** · 13/02/2017, 14h26

$('.fence-btns').each(

on n'a pas besoin de parcourir, jQuery s'en charge, par contre toutes les données « appendées » seront les mêmes, c'est peut être là le problème !?!

**SpaceFrog** · 13/02/2017, 14h35

Code :

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

1
2
3
4
5
6
7
8
9
<ul>
  <li class="foo"></li>
  <li class="foo"></li>
  <li class="foo"></li>
  <li class="foo"></li>
  <li class="foo"></li>
  <li class="foo"></li>
  <li class="foo"></li>
</ul>

Code :

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

1
2
3
$(function(){
$('.foo').append($('<span/>').html('truc'));
})

En effet Jquery clone le span... je n'aurais pas parié dessus ...

Mais pour différentier les données on est obligé de passer par un each

Code :

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

$('.foo').each( function(idx, obj){ $(obj).append( $('<span/>').html('truc '+idx) ) });

Comment rafraichir mon CSS ou faire un append sur plusieurs class

jQuery

Vue hybride

Discussions similaires

Partager

Partager