Afficher les LI en fonction de l'ID dans l'ordre

Question

Je travaille sur la création d'une boucle for qui appelle un effet javascript et l'applique à un LI en le faisant dans l'ordre. Voici ce que j'ai:

$(document).ready(function () {
    for(i=1;i<=10;i++) {
        $("li#"+i).show();
    }
});

Cependant, cela ne fonctionne pas. J'en ai besoin pour appliquer l'effet à LI # 1, puis à LI # 2, LI # 3 ... et ainsi de suite.

Ce que j'essaie de faire est similaire à ce que fait Twitter lorsque vous cliquez sur & "Plus &"; bouton au bas de la page seulement au lieu de sauter, je veux qu'il se relâche.

EDIT: je ne peux pas simplement envelopper les LI dans une DIV, car je vais ajouter des LI à un élément UL.

Cependant, s’il existait un moyen d’animer l’UL après avoir changé de taille, je serais tout à fait favorable.

Answer 1

$(document).ready(function () {
    for(i=1;i<=10;i++) {
        $("li#"+i).show("slow");
    }
});

Consultez show (rapidité, [rappel]) . De la doc:

  

Afficher tous les éléments correspondants à l'aide d'un   animation gracieuse et tir d'un   Rappel facultatif après achèvement.

     

La hauteur, la largeur et l'opacité de chaque   des éléments correspondants sont changés   dynamiquement selon le spécifié   vitesse.

En outre, il existe d'autres moyens de masquer et de révéler des éléments, tels que fadeIn et < a href = "http://docs.jquery.com/Effects/fadeOut" rel = "nofollow noreferrer"> fadeOut . Consultez http://docs.jquery.com/Effects .

J'ai rapidement fait une maquette du genre de chose que vous recherchez avec des données statiques:

var $lis = $('<li>blha blhahah lajlkdj</li><li>blha blhahah lsdfsajlkdj</li>').hide();
$('ul').append($lis);
$lis.show("slow");

et cela fonctionne, il est donc concevable que vous puissiez faire quelque chose comme ce qui suit, sans avoir à vous soucier de l'itération des ID d'élément:

$.load('/items/?p=2',function(data) {
    var $lis = $(data).hide();
    $('ul').append($lis);
    $lis.show("slow");
});

Pour préciser, l'appel ci-dessus à $ .load suppose que la sortie de / items /? p = 2 sur votre site est un groupe de LI

Answer 2

si vous souhaitez que chacun d'entre eux apparaisse au même taux, mais avec un léger délai entre chacun, vous devrez peut-être utiliser setTimeout ... par exemple ...

$(document).ready(function () {        
    var showListItem = function(index) {
        $("li#"+index).show("slow")
    };
    for(i=1;i<=10;i++) {
        setTimeout(function() { showListItem(i); }, (i * 100))
    }
});

Cela peut sembler un peu idiot, mais si je me souviens bien, à moins d’envelopper votre index (i) dans une enceinte, la méthode qui s’exécute verra toujours la valeur de i comme 10.

Answer 3

Assurez-vous également que si vous déclenchez cette action lors d'un autre événement qui charge de nouveaux éléments via Ajax (comme après avoir cliqué sur le bouton & "Plus &";), vous devez alors envelopper votre logique. .live () disponible dans jQuery 1.3.

Si vous utilisez jQuery 1.2, vous pouvez utiliser plutôt livequery .

Answer 4

Cela devrait le faire, si vous avez une liste comme celle-ci:

<ul id='menu' style='display: none;'>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
</ul>

Vous pouvez ensuite écrire du code pour afficher les éléments de la liste de manière séquentielle, comme suit:

$('#menu').show().find('li').hide().bind('show', function() {
  $(this).show('slow', function() {
    $(this).next('li').trigger('show');
  });
}).filter(':first').trigger('show');

Le code effectue les opérations suivantes: Recherche du menu <ul>, affichage, recherche de tous les <li> et masquage, liaison d'un événement personnalisé appelé show qui affiche lentement l'élément, puis une fois complètement affiché. cherche s'il y a du <=> à côté et déclenche le même événement pour cet élément. Ensuite, nous filtrons de tous les <=> uniquement le premier et nous déclenchons cet événement personnalisé, en activant essentiellement l'effet domino.

En voici un exemple au travail . Si vous le vouliez plus vite, vous pourriez changer le mot "lent" en "rapide" ou un temps.