IDに基づいてLIを順番に表示

StackOverflow https://stackoverflow.com/questions/1020868

  •  06-07-2019
  •  | 
  •  

質問

私は、JavaScript効果を呼び出してLIに適用するforループを作成し、順番に実行しています。ここに私が持っているものがあります：

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

ただし、これは機能しません。 LI＃1、LI＃2、LI＃3 ...などにエフェクトを適用するために必要です。

やろうとしていることは、Twitterが<！> quot; more <！> quotをクリックしたときの動作と似ています。ページの下部にあるボタンだけをジャンプするのではなく、下に置いてください。

編集： LIをUL要素に追加するため、LIをDIVにラップするだけではできません。

ただし、サイズが変更されたためにULをアニメートする方法があれば、それですべてです。

役に立ちましたか？

解決 

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

show（speed、[callback]）をご覧ください。ドキュメントから：

  

一致するすべての要素を表示するには、   優雅なアニメーションと発射   完了後のオプションのコールバック。

     

それぞれの高さ、幅、および不透明度   一致した要素の変更   指定に従って動的に   スピード。

また、 fadeIn や< href = "http://docs.jquery.com/Effects/fadeOut" rel = "nofollow noreferrer"> fadeOut 。 http://docs.jquery.com/Effects をご覧ください。

静的データを使用して、あなたが望んでいる種類の簡単なモックアップを行いました：

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

それが機能するので、次のようなことができ、要素IDを反復処理する頭痛に悩まされる必要はないと考えられます：

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

明確にするために、上記の $ .load の呼び出しは、サイト上の / items /？p = 2 はLIの束です

他のヒント

それぞれを同じレートで表示したいが、それぞれの間にわずかな遅延がある場合、たとえばsetTimeout ...を使用する必要があるかもしれません... 

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

それは少しばかげているように見えるかもしれませんが、正しく覚えていれば、インデックス（i）を何らかの種類のエンクロージャーでラップしない限り、実行されるメソッドは常にiの値を10として認識します。

また、（<！> quot; More <！> quot;ボタンをクリックした後など）Ajaxを介して新しいアイテムをロードする別のイベントでこれをトリガーする場合は、ロジックをラップする必要があります。 jQuery 1.3で利用可能な .live（）

jQuery 1.2を使用している場合は、代わりに livequery を使用できます。

次のようなリストがある場合は、これを行う必要があります。

<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>

次のようにリスト項目を順番に表示するコードを書くことができます：

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

コードは次を実行しています：メニュー<ul>の検索、表示、すべての<li>の検索と非表示、要素をゆっくり表示するshowというカスタムイベントのバインド、および完全に表示されたらその隣に<=>があるかどうかを確認し、その要素に対して同じイベントをトリガーします。次に、最初のすべての<=>のみからフィルタリングし、このカスタムイベントをトリガーして、本質的にドミノ効果を開始します。

これが職場での例です。より速くしたい場合は、「遅い」を「速い」または時間に変更できます。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top