人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

jQueryでの質問です。
下記のような複数のliのDOMに対してのアクションをする際に、最後のアクション後に1度だけ処理を行うスマートな記述を教えてください。
fadeOutのコールバックだと全てのliに対してコールバックが用意されてしまうため、最後のliの処理が終わったときのみに終了をお知らせする関数を呼び出したいのです。


<script>
$(function(){
$('ul li').fadeOut(function(){
// 最後のli(ここでは「4」のみ)で何か処理をする記述
});
});
</script>

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>

●質問者: hirorock
●カテゴリ:インターネット ウェブ制作
✍キーワード:DOM jQuery UL アクション スマート
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● Cherenkov
●27ポイント

>最後のアクション後

の意味がよくわからないです。

こういうのじゃだめですか?

http://jsfiddle.net/2kmnC/1/

<script>
$(function(){
 $('ul li:last').addClass('lastLi');
 $('ul li').fadeOut(function(){
 if ($(this).hasClass('lastLi')) {
 alert("finish! :"+$(this).text())
 }
 });
});
</script>
<ul>
 <li>1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
</ul>

(コメント欄を有効にしたほうがいいと思います)

◎質問者からの返答

ありがとうございます

たしかに不明確でわかりませんね…申し訳ないです

ここでいう

「最後のアクション」は、

「$('ul li')で取得した4つのliをfadeOutさせますが、その中で最後のli(

  • 4
  • )をfadeOutさせる時」にという事としてください。


    お答えいただいたソースで動作は間違いないのですが、

    もう少しだけスマートな記述方法は出来ないかな〜と質問させていただきました。

    あっ!それと「http://jsfiddle.net/」って便利ですね!

    知りませんでした

    これは人に伝えやすいですね


    2 ● typista
    ●26ポイント

    http://jsfiddle.net/2kmnC/3/

    こんなんでどうでしょ?

    <script>
    $(function(){
     $('ul li').fadeOut().last().queue(function(){
     alert("finish! :"+$(this).text()); 
     });
    });
    </script>
    <ul>
     <li>1</li>
     <li>2</li>
     <li>3</li>
     <li>4</li>
    </ul>
    

    3 ● rikuba
    ●27ポイント ベストアンサー

    質問文のコードだと、上位のulをfadeOutさせれば良いように思えます。

    jQuery(function ($) {
     $('ul').fadeOut(function () {
     var li = $(this).children(':last');
     alert('finish ' + li.text());
     });
    });
    

    他に理由があって個々のliをfadeOutしているのであれば、isメソッドを使うのが良いと思います。

    jQuery(function ($) {
     $('ul li').fadeOut(function () {
     var li = $(this);
     if (li.is(':last-child')) {
     alert('finish ' + li.text());
     }
     });
    });
    
    関連質問


    ●質問をもっと探す●



    0.人力検索はてなトップ
    8.このページを友達に紹介
    9.このページの先頭へ
    対応機種一覧
    お問い合わせ
    ヘルプ/お知らせ
    ログイン
    無料ユーザー登録
    はてなトップ