numeroter mes titres en jquery

**wperle** · 28/09/2013, 04h47

Bonsoir,

J'ai essayé ce code pour numéroter mes titres (h1). mais le problème c'est que autant de fois que je cliques le programme m'ajoute le numéro.

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
 
<html>
    <head>
              <title>JQuery</title>
        <style>
			#lipsum
			{
				margin-top:25px;
			}
			#para
			{
				margin:0px 0px 0px 0px;
				padding: 0px 0px 0px 0px;
			}
        </style>
 
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 
        <script>
        $(function(){
 
               $('#numTitre').click(function(){
 
                    $('h1').each(function(i){
                            i=i+1;
                            $(this).prepend(i,'. ');
                    })
 
                });
 
        })
 
 
 
        </script>
 
	</head>
 
    <body>
 
        <div id="lipsum">
        <h2>Numéro 3 et 4</h2>
        <button id="numTitre">Numérote titre</button><button id="numPara">Numérote paragraphe</button>
            <h1>  Lorem ipsum dolor sit amet</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at nisl   ut mauris auctor fringilla non ut massa. Ut tristique purus et mi   aliquet in feugiat neque consequat. Mauris ultricies condimentum diam,   at dignissim ligula tempus ac. Pellentesque tempor feugiat odio et   auctor. Morbi quis tellus magna. Curabitur porttitor, felis at   scelerisque malesuada, dui dolor varius magna, sit amet rhoncus nisl   libero in leo. Mauris in ante nisi, vitae adipiscing erat. Fusce in   sapien semper ipsum pulvinar lobortis. Proin consequat lacus ut augue   ullamcorper hendrerit. Cras ac dolor urna. Vestibulum eu urna enim.   Class aptent taciti sociosqu ad litora torquent per conubia nostra, per   inceptos himenaeos. Morbi quis nibh dolor, eget placerat mi. Curabitur   et auctor libero. Pellentesque erat nulla, bibendum lobortis bibendum   ut, dignissim sed tortor. </p>
            <p> Nulla bibendum adipiscing diam, vitae mattis dui dapibus nec. Sed eu   purus quis quam sodales venenatis eu accumsan mi. Aliquam mattis, augue   at pulvinar tincidunt, massa est tincidunt nulla, eu tincidunt tellus   metus et lorem. Fusce vulputate malesuada dui, ac aliquam eros ornare   eu. Donec purus massa, tincidunt et venenatis eget, pharetra vel neque.   Sed aliquet scelerisque lacus, eget volutpat orci viverra eu. Nullam   vestibulum eros non quam porttitor nec porta ipsum varius. Maecenas odio   massa, vehicula at egestas vel, iaculis eu ante. Donec porta   pellentesque purus, nec faucibus nunc laoreet ut. In sagittis, eros vel   dignissim faucibus, diam leo ornare magna, eu convallis felis enim quis   neque. Vivamus a nunc velit, vitae malesuada est. </p>
            <p> Maecenas aliquam turpis mollis arcu bibendum in faucibus tellus   ullamcorper. Sed et erat diam, quis viverra lectus. Quisque malesuada   mollis lacinia. Vestibulum imperdiet accumsan dolor, non ultrices sem   adipiscing in. Etiam arcu enim, tincidunt nec commodo at, consequat sed   ligula. Morbi bibendum vehicula quam non vestibulum. Sed euismod elit   non justo laoreet eget vehicula mauris consectetur. Nulla viverra neque   nec dui blandit vulputate. Class aptent taciti sociosqu ad litora   torquent per conubia nostra, per inceptos himenaeos. Integer iaculis est   lobortis dui aliquet eget dignissim lectus volutpat. Nam vitae gravida   enim. Integer rutrum massa non neque placerat eu rutrum odio blandit.   Sed tristique nisl eget dui tempor eget ultrices ante auctor.   Pellentesque habitant morbi tristique senectus et netus et malesuada   fames ac turpis egestas. </p>
            <h1> Lorem ipsum dolor sit amet</h1>
            <p> Praesent quis tempus quam. Mauris imperdiet urna vel lacus rutrum   pellentesque. Morbi nibh magna, imperdiet sit amet aliquam in, semper   sit amet diam. Integer ultrices eros est. Aenean facilisis nisi et nibh   sagittis sit amet bibendum nulla egestas. Suspendisse congue eleifend   mauris vitae scelerisque. Vestibulum egestas gravida dictum. Maecenas   rutrum mi a neque eleifend quis lacinia neque tempor. Vestibulum lacus   orci, sollicitudin ac consequat id, malesuada eget ipsum. Quisque   rhoncus gravida tristique. </p>
            <p> Donec et massa urna. In eget neque ac ligula mollis bibendum vehicula id   mauris. Fusce luctus lacinia urna sed tempor. Nullam eu nisi dui, non   ullamcorper turpis. Quisque quis venenatis urna. Quisque egestas purus   sit amet purus faucibus hendrerit. Aenean eu mi a justo molestie   vestibulum. Aliquam posuere urna vitae ante posuere a blandit elit   congue. Sed at nisi in urna rutrum tincidunt. </p>
            <p> Aenean turpis sapien, eleifend non accumsan non, posuere in orci. Fusce   vitae nulla in sem varius mollis id sit amet dui. Aenean nec adipiscing   urna. Donec ultrices purus lectus. Vestibulum sit amet malesuada sapien.   Donec vitae risus mi. Donec viverra ultrices est, nec fringilla massa   pulvinar vel. Proin suscipit nulla in lorem condimentum non sollicitudin   ipsum ultrices. Mauris nisl mauris, dapibus ut hendrerit vel, dignissim   ut est. Quisque lobortis dui eget libero cursus vel molestie enim   gravida. Proin iaculis erat a urna cursus posuere. </p>
            <h1> Lorem ipsum dolor sit amet</h1>
            <p> Vivamus libero justo, vehicula et imperdiet at, egestas eget justo.   Praesent quam lorem, ornare nec rutrum nec, fermentum vel leo. Morbi   posuere pulvinar ligula sit amet lacinia. Sed posuere fermentum odio.   Nam accumsan ante at metus sollicitudin sed posuere urna cursus. Morbi   vestibulum ornare condimentum. Cras nec quam sem. Proin quam ante,   rutrum id ultricies id, consequat vel lectus. Duis non aliquam magna.   Sed quis neque dignissim tellus placerat convallis eu in risus. Proin at   enim a odio ullamcorper pharetra et ut dui. In sagittis mi sed turpis   ultricies commodo. Curabitur facilisis consectetur sapien sed gravida. </p>
            <p> Donec condimentum nisi at augue egestas eu fringilla ipsum accumsan.   Aliquam vehicula ipsum vel sapien porttitor aliquet. Quisque ante purus,   euismod eu hendrerit ut, pretium ac tellus. Donec urna leo, elementum   sit amet vulputate in, lacinia ac velit. Aliquam a tellus nibh. Fusce   sed elit et metus porta semper non in nulla. Nulla in nisl libero. Donec   vitae est fermentum sem bibendum vehicula in a tellus. Integer pulvinar   facilisis lectus, non congue libero consequat varius. Sed tortor enim,   ultricies malesuada molestie non, tempor nec urna. Mauris in fringilla   orci. </p>
            <p> Etiam venenatis sollicitudin placerat. Maecenas ac leo quis enim   ultrices semper sed id augue. Cras vestibulum, ante sit amet faucibus   sollicitudin, massa tellus vestibulum dui, dapibus bibendum nibh sem vel   massa. Nullam quis mauris ligula. Maecenas nibh sapien, tristique et   pretium et, sagittis at ante. Pellentesque ut vehicula mi. Praesent   congue semper suscipit. Vivamus pulvinar, urna eget placerat blandit,   tellus odio interdum augue, non bibendum odio libero blandit augue. </p>
            <p> Morbi molestie ultricies augue id feugiat. Morbi ultrices, ante nec   interdum iaculis, ipsum lectus eleifend ligula, quis lacinia ligula leo a   mauris. Mauris sagittis convallis nulla, vitae mattis dui porttitor   pretium. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed   lacinia dictum consequat. Morbi tincidunt magna in augue dignissim ut   interdum sapien varius. Cras tincidunt scelerisque nulla non aliquet.   Fusce id sapien vel velit auctor suscipit. Suspendisse nec odio elit.   Morbi sapien diam, hendrerit id vehicula vel, aliquam rutrum magna.   Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere   cubilia Curae; Cras tempor leo in lectus lobortis mattis. Donec   condimentum, est eget venenatis sollicitudin, eros orci ornare purus,   bibendum placerat libero sem at ligula. Ut at eros enim. </p>
 
        </div>
 
 
    </body>
</html>

**elfamine** · 28/09/2013, 07h14

Bonjour,
Si tu cherche a executer l'evenement qu'une fois alors one() devrait faire l'affaire

Code javascript :

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

1
2
3
4
5
6
7
 
$('#numTitre').one( "click", function() {
    $('h1').each(function(i){
        i++;
        $(this).prepend(i,'. ');
    });
});

**wperle** · 28/09/2013, 12h51

Merci, ça marche.

Maintenant je souhaiterais numéroté les paragraphes. cad avoir un affichage :

1. titre
1.1 sous titre
1.2 sous titre
1.2 sous titre

2. titre
2.1 sous titre
2.2 sous titre
2.2 sous titre

**NoSmoking** · 28/09/2013, 14h30

Bonjour,
quelle drôle d'idée que de vouloir passer par javascript pour faire de la numérotation, le CSS est capable de gérer cela, certes si l'on exclu IE7.

En gros cela donnerait

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
body {
  counter-reset: niveau0;
}
h1.niveau1{
  counter-reset: niveau1;
}
h1:before {
  counter-increment: niveau0;
  counter-reset: niveau1;
  content: counter( niveau0) ".";
}
p:before {
  counter-increment: niveau1;
  content: counter( niveau0) "." counter(niveau1) " ";
}

Generated content, automatic numbering, and lists.

nota : La construction de ta page reste moyenne, H2 -> H1 l'inverse eut été préférable.

**wperle** · 28/09/2013, 14h43

Ok et merci beaucoup, mais le problème il me l'a demandé de la faire en JQuery. Est ce que c'est possible ?

Quand je cliques sur le bouton "Numérote titre" c'est les <h1> qui doivent numéroté. et si je cliques sur le bouton "Numérote les paragraphes" dans ce cas les <p> de sous <h1> qui doivent être numéroté. Mais cela je dois la faire en JQuery.

**NoSmoking** · 28/09/2013, 15h04

elfamine t'a montré comme faire avec les H1, il ne te reste plus qu'à mettre cela en forme pour les P des H1.

numeroter mes titres en jquery

jQuery

Vue hybride

Discussions similaires

Partager

Partager