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.

Compter le nombre de li d'un ul et addClass

jQuery

Vue hybride

Discussions similaires

Partager

Partager