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>

回答の条件
  • 1人1回まで
  • 13歳以上
  • 登録:2010/12/13 10:38:33
  • 終了:2010/12/20 10:40:03

ベストアンサー

id:rikuba No.3

rikuba回答回数26ベストアンサー獲得回数122010/12/14 20:50:09

ポイント27pt

質問文のコードだと、上位の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());
    }
  });
});

その他の回答(2件)

id:Cherenkov No.1

Cherenkov回答回数1502ベストアンサー獲得回数4922010/12/13 16:41:05

ポイント27pt

>最後のアクション後

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

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

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>

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

id:hiro-rock

ありがとうございます

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

ここでいう

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

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

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


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

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

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

    知りませんでした

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

    2010/12/13 17:04:55
    id:typista No.2

    typista回答回数359ベストアンサー獲得回数72010/12/15 09:33:14

    ポイント26pt

    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>
    
    id:rikuba No.3

    rikuba回答回数26ベストアンサー獲得回数122010/12/14 20:50:09ここでベストアンサー

    ポイント27pt

    質問文のコードだと、上位の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());
        }
      });
    });
    

    コメントはまだありません

    この質問への反応(ブックマークコメント)

    「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

    これ以上回答リクエストを送信することはできません。制限について

    絞り込み :
    はてなココの「ともだち」を表示します。
    回答リクエストを送信したユーザーはいません