Compter le nombre de li d'un ul et addClass

**Jeremylgx** · 11/04/2012, 10h17

Bonjour à tous,

Je suis en train de créer un template joomla et je voudrais compter le nombre de li contenu dans un menu ul afin d'appliquer une classe différente à ce ul en fonction du nombre de li. Je pourrai ensuite appliquer des styles différents via la feuille de style css. J'ai trouvé une solution à cette adresse : http://stackoverflow.com/questions/2...s-to-parent-ul
Le fichier source fonctionne parfaitement mais je n'arrive pas à l'appliquer à mon template. Je copie pourtant bien cette ligne dans la balise head.

Code :

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

<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Et ensuite ceci avant la fermeture du body :

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
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<script>
jQuery(document).ready(function(){
$(".menuthematiques").each(function(){
 
    if ($(this).children('li').size() == 6 )
    {
        $(this).addClass('six');
        $(this).append('six');
    }
 
    if ($(this).children('li').size() == 5 )
    {
        $(this).addClass('cinq');
        $(this).append('cinq');
    }
 
    if ($(this).children('li').size() == 4 )
    {
        $(this).addClass('quatre');
        $(this).append('quatre');
    }
 
    if ($(this).children('li').size() == 3 )
    {
        $(this).addClass('trois');
        $(this).append('trois');
    }
 
    if ($(this).children('li').size() == 2 )
    {
        $(this).addClass('deux');
        $(this).append('deux');
    }
 
    else if ($(this).children('li').size() == 1 )
    {
        $(this).addClass('un');
        $(this).append('un');
    }
});
});
</script>

J'ai oublié quelque chose ?

**SpaceFrog** · 11/04/2012, 10h18

size() ???
=> essaye length

**SpaceFrog** · 11/04/2012, 10h20

sinon passe plutot par les selecteurs ...

Code :

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

1
2
3
 
$('.menuthematiques li:eq(index)')
$('.menuthematiques li:nth-child(index)')

**Jeremylgx** · 11/04/2012, 10h33

Merci pour ta réponse rapide SpaceFrog

Je viens d'essayer tes propositions mais ça ne fonctionne pas non plus. Le code original avec size() fonctionne pourtant bien sur une page statique. Est ce qu'il y a un rapport avec le fait que j'essaie de l'appliquer à un template joomla, donc à une page dynamique ?

**SpaceFrog** · 11/04/2012, 10h50

Test ça

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
21
22
23
24
25
26
27
28
<script type="text/javascript">
$(function(){
$('.menuthematiques li:eq(4)').addClass('cinq')
$('.menuthematiques li:eq(5)').addClass('six')
 
$('.menuthematiques li:nth-child(5)').html('foo')
$('.menuthematiques li:nth-child(6)').html('bar')
})
</script>
<style type='text/css'>
.cinq{color: red;}
.six{color: green;}
</style>
</head>
<body>
<ul class="menuthematiques">
	<li>un </li>
	<li>deux</li>
	<li>trois</li>
	<li>quatre</li>
	<li>cinq</li>
	<li>six</li>
	<li>sept</li>
	<li>huit</li>
	<li>neuf</li>
</ul>
</body>
</html>

**Jeremylgx** · 11/04/2012, 11h05

Ce code fonctionne quand je le teste seul en page statique mais ne fonctionne pas une fois implémenté dans mon template.

**SpaceFrog** · 11/04/2012, 11h07

Alors ça ne relève plus de jquery

=> voir le forum joomla

**Jeremylgx** · 11/04/2012, 11h12

Merci pour ton aide. Je vais aller voir dans la partie Joomla.

**SpaceFrog** · 11/04/2012, 11h13

Juste une dernière vérif ...

ton ul est présent sur la page lorsque le ready est lancé ?

**Bovino** · 11/04/2012, 11h14

Enfin, avant tout, commence déjà par regarder le code source de ta page pour voir :

si tu as bien des ul avec comme classe .menuthematiques ;
si c'est le cas, combien ils ont de li chacun.

**Jeremylgx** · 11/04/2012, 11h30

Mon ul est généré par le module menu de joomla avec la classe menuthematiques. C'est pour ça que j'avais mis le script just avant la fermeture de body.
Mais j'ai aussi essayé avec une liste mise directement dans le body sans succès.

Code :

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

1
2
3
4
5
6
7
8
9
10
<ul class="menuthematiques">
<li>un</li>
<li>deux</li>
<li>trois</li>
<li>quatre</li>
<li>cinq</li>
<li>six</li>
<li>sept</li>
<li>huit</li>
</ul>

Mon nombre de li varie de 2 à 5 environ en fonction des pages. Ce code me permettrait de préparer toutes les éventualités.