jquery: addClass 1,2,3 etc. auto pour une liste

est-il possible, pour ajouter auto numérique classes à une liste à l'aide de jquery?

html:

<ul id="list">
 <li>Element 1</li>
 <li>Element 2</li>
 <li>Element 3</li>
 <li>Element 4</li>
 <li>Element 5</li>
</ul>

je veux obtenir quelque chose comme ceci:

<ul id="list">
 <li class="1">Element 1</li>
 <li class="2">Element 2</li>
 <li class="3">Element 3</li>
 <li class="4">Element 4</li>
 <li class="5">Element 5</li>
</ul>

espère qu'il y a une solution 🙂

Modifier

ok, mhhm mais ma liste n'a pas toujours un nombre à la fin. donc, ce est à propos d'un nom de classe de la combinaison, comme "élément + nombre" ? est quelque chose comme cela possible?

<ul id="list">
 <li class="item1">Element x</li>
 <li class="item2">Element c</li>
 <li class="item3">Element a</li>
 <li class="item4">Element d</li>
 <li class="item5">Element f</li>
</ul>
Je pense que vous devriez ajouter des classes avant que la page ne rend à l'intérieur de la boucle

OriginalL'auteur Svensson | 2010-04-15

  1. 18
       $("#list li").each(function(i) {
     this.addClass("item"+(i+1));
    });

    Ici, il est en action

    http://jsbin.com/ocake

    Mise à jour par les commentaires, comme dans l'exemple de lien cela fonctionne :

    $(document).ready(function() {
        $("#list li").each(function(i) {
        $(this).addClass("item" + (i+1));
        });
      });

    Mais je pense que le code devrait fonctionner en ajoutant :

    this = $(this);

    Mais pas sûr.

    this devrait être $(this)
    mise à jour de réponse, merci
    merci pour cette. cela m'a aidé. 3 ans plus tard @fourmi

    OriginalL'auteur ant

  2. 4
    $("#list").children().each(function(i) {
  $(this).addClass("prefix_" + (i+1));
});
    +1, la solution la plus simple et ne nécessite pas de traitement de chaîne. Petit correctif: doit être this.addClass(i+1).
    C'est en supposant que vous souhaitez ajouter à la classe basée sur la position des éléments, par opposition au texte contenu à l'intérieur (dont tout le monde semble avoir assumé..)
    Ah oui, i+1, merci 😀
    merci :-), mais cette fonction ne fonctionne pas, i+1 fix ne fonctionne pas :-??
    corrigé, devrait fonctionner maintenant!

    OriginalL'auteur Jeriko

  3. 2

    CSS 2 a certaines règles spéciales relatives à numérique de la classe des noms. Voir la la grammaire, plus précisément de "classe" dans G. 1, "nmstart", dans G. 2, et le point final dans G. 3.

    À l'aide de classes .c1 .c5:

    $('#list li').each(function(){
    $(this).addClass( 'c' + $(this).text().substr(-1) );
});

    Noter que cette hypothèse très dernier caractère de la <li> est un nombre. Vous pouvez avoir à modifier (éventuellement à l'aide de regex) pour votre cas d'utilisation.

    Je pense que les chiffres sont autorisés à voir la dernière ligne de votre lien.
    Ah, merci pour le tuyau. C'était un cas où il y a des années j'ai frappé un navigateur qui ne prend pas en charge numérique des classes, j'ai donc cessé de les utiliser, alors ce poste m'a incité à trouver le "pourquoi" 🙂
    cette solution fonctionne uniquement pour les chiffres/caractères
    Je sais, je l'ai déjà signalé dans ma réponse. Apparemment c'est un site pour les programmeurs, qui, j'espère, ont une certaine capacité à adapter ce qu'ils sont en apprentissage au sein de ce site.

    OriginalL'auteur Annika Backstrom

  4. 1

    Pour jQuery 1.4.x:

    $("#list > li").addClass(function(i){return "item" + (i + 1);});

    OriginalL'auteur Kobi

  5. 0
    $('ul#list li').each(function(){
  $(this).addClass( $(this).text().split(' ')[1] );
});

    OriginalL'auteur clyfe

  6. 0

    ok, mhhm mais ma liste n'a pas toujours un nombre à la fin. donc, ce est à propos d'un nom de classe de la combinaison, comme "élément + nombre" ? est quelque chose comme cela possible?

    <ul id="list">
 <li class="item1">Element x</li>
 <li class="item2">Element c</li>
 <li class="item3">Element a</li>
 <li class="item4">Element d</li>
 <li class="item5">Element f</li>
</ul>
    Si votre question a changé, vous devez supprimer cette réponse et, au lieu de réécrire la question.
    Backstrom, j'ai nettoyé ce pour lui.

    OriginalL'auteur Svensson