11521 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Jquery : numéroter une liste (ul)

Coucou les gens !

Je vous explique un peu ce pour quoi j'aurais besoin d'aide, étant débutante dans le javascript. J'ai donc une liste, un champ (input) et un bouton. Quand j'écris quelque chose dans le input, si j'appuie sur le bouton, le texte s'ajoute à ma liste. Jusque là, j'ai réussis sans trop de problèmes. Maintenant, l'étape numéro deux, c'est que cette liste doit être numéroté. C'est-à-dire que la liste ressemblerait à ceci :
• 1. Pizza
• 2. Carotte

Je vous montre un peu mon code:


Javascript :
upload/1495388215-65807-html2.png

Merci d'avance les loulous.
Modifié par pallipalli (22 May 2017 - 09:39)
Bonsoir !

Je connais l'astuce de l'ol. Sauf que pour cet exercice, je n'ai pas le droit de changer le ul pour le ol. Je dois garder l'ul, et à partir de là, ajouter les chiffres. Smiley smile
Hey ! Merci du lien, il me sera sûrement utile dans le futur, cependant, c'est du CSS non ? Parce que pour cet exercice, je dois tout faire en jquery. -oui je suis un peu casse pieds je crois ;;-
Hello,
le principe en javascript ou jQuery me semble le suivant :
une variable JS (appelons-la compteur) contient le nombre de <li> au départ.
dans notre exemple = 2;
les <li> de départ contiennent leur rang avant le contenu, genre "1 Pizzas", 2 carottes", etc.

A chaque ajout : on incrémente de 1 la variable compteur, et on ajoute sa valeur suivie d'un espace avant le texte saisi, ceci pour créer la nouvelle <li>...</li>
javascript suffit largement pour ce genre de manip mais bon...
En Javascript ? Par exemple deux fonctions, une qui va chercher les li déjà existants comme querySelectorAll, prend le contenu des li, ajoute la valeur d'une variable précédemment initialisée et qui, à chaque fois, est incrémentée, l'autre fonction fait partie de la fonction qui ajoute les lignes, on prend le contenu de la variable et on incrémente, et ajoute la valeur de cette variable au début de chaque ligne.

Mais c'est quand même plus compliqué...

Smiley smile
Hello !

Alors, je suis pas sûre d'avoir compris après la création de la variable...

ça ferait quelque chose de ce genre ?

var compteur = $('li');
for (var i = 1; i<2; i++)



Bah même en Javascript, je n'y arrive pas. J'ai réussis à ajouter les chiffres pour les 2 ingrédients présents mais ça ne fonctionne pas sur les ingrédients qui s'ajoutent au fur et à mesure. Smiley confused

Zelena je n'avais pas vu ton message hehe... Oui, un ami m'a dit de faire comme tu me dis, sauf que j'ai jamais compris comment l'écrire. D'ailleurs, c'est lui qui m'a écrit le code pour les 2 ingrédients existants et honnêtement, j'y comprends rien.
Modifié par pallipalli (21 May 2017 - 20:09)
Administrateur
Solution :
$("ul li").each(function() {
   $(".num",this).remove()
   $(this).prepend('<span class="num">'+($(this).index()+1)+'</span>');
});
Meilleure solution
Bonjour,

J'arrive un peu tard, mais sinon, j'avais également ça :
function liste(){
  var $ul = $('ul'),
      $in = $(':text'),
      cpt = 0;
  
  $ul.children('li').each(function(){
    cpt++;
    $(this).text( cpt+'. '+$(this).text() )
  })
  
  $('button').click(function(){
    cpt++;
    $ul.append('<li>'+cpt+'. '+$in.val()+'</li>')
  })
}
Bonjour ! Le code marche bien pour les mots existants dans le html, par contre, quand j'ajoute un mot à la liste en cliquant sur le bouton, ça m'ajoute 2 nouveaux mots en fait. Le chiffre, puis le mot. Genre

• Edfjo
• 2
• ewhdie

Mais je vais quand même garder ce code dans mes notes, il me sera sûrement utile ha. D'ailleurs, où est-ce que je peux lire plus d'informations sur tout ça ? J'ai eu beau chercher sur tout le net ces derniers jour j'ai jamais rien trouvé.
Sujet clos
Aller à