jquery .each（）メソッドで.on（）メソッドを使用する方法。

Question

私は自分のウェブサイトのhtmlで練習しており、これを見つけました。私はそれが簡単な修正だと確信していますが、それを実現させる方法を知りたいです。私はすべての私のリストの項目や、特定のクラスだけでも影響を受けたい。 .each（）メソッドは、jqueryオブジェクトにマッチしたすべての要素にアクセスすることを知っています。このコードは、.each（）メソッドを使用してすべてのリストアイテムに効果的にアクセスします。 $(function() { var $li = $('li'); $li.hide().each(function(index) { $(this).delay(700 * index).fadeIn(700) }); });

このコードでは、複数の場所に配置しようとしたため、短いドキュメントの準備機能の後に新しい匿名関数でブロック全体をラップしようとしたため、ここでは.each（）メソッドはありません。

$(function() { 
var $list = $('.nav'); 
$list.on('click', function() { 
    $(this).animate({ 
     opacity: 0.0, 
     paddingLeft: '+=80' 
    }, 500, function() { 
     $(this).remove(); 
    }); 
}); 

}）;

これはnav属性のファーストクラスの項目でのみ機能します。 何か助けていただければ幸いです。ありがとう！

Answer 1

.on()がすでにリスト内のすべてのアイテムに適用されますので、あなたは.each()は必要ありません。

あなたのコードはすでに.navクラスのすべての項目で動作しています。以下に説明する作業用のコードスニペットがあります。 3つのアイテムのそれぞれをクリックして、それらが消えるのを見ることができます。アプリケーションで動作していない場合は、他の問題が原因である必要があります。 jQueryオブジェクトをチェックし、それが本当にあなたが思うすべての要素が本当に含まれていることを確認してください！

$(function() { 
 
var $list = $('.nav'); 
 
$list.on('click', function() { 
 
    $(this).animate({ 
 
     opacity: 0.0, 
 
     paddingLeft: '+=80' 
 
    }, 500, function() { 
 
     $(this).remove(); 
 
    }); 
 
}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="nav"> 
 
First item 
 
</div> 
 

 
<div class="nav"> 
 
Second item 
 
</div> 
 

 
<div class="nav"> 
 
Third item 
 
</div>

Answer 2

はこれを試してみてください：

$(function() { 
    $(document).on('click', '.nav', function() { 
     $(this).animate({ 
      opacity: 0.0, 
      paddingLeft: '+=80' 
     }, 500, function() { 
      $(this).remove(); 
     }); 
    }); 
}); 

あなたはシングルクリックですべてを削除するために欠けていますか？そうであれば、次のように動作します。

$(function() { 
     $(document).on('click', '.nav', function() { 
      $('.nav').animate({ 
       opacity: 0.0, 
       paddingLeft: '+=80' 
      }, 500, function() { 
       $('.nav').remove(); 
      }); 
     }); 
    });