如何在jQuery中使用.on（）方法和.each（）方法。？

Question

我正在练习我自己的网站的HTML，并偶然发现这一点。我相信这是一个简单的解决方法，但想知道如何实现它。我希望我所有的列表项目或甚至只是一个特定的类受到影响。我知道.each（）方法访问jQuery对象中匹配的所有元素。此代码使用.each（）方法有效地访问所有列表项。 $(function() { var $li = $('li'); $li.hide().each(function(index) { $(this).delay(700 * index).fadeIn(700) }); });

此代码不会有。每（）方法，在这里，因为我试过将其放置在多个地方，甚至试图速记文件准备功能包裹后整个块在新的匿名功能。

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

}）;

这只适用于属性为nav的第一类项目。 任何帮助非常感谢。谢谢！

Answer 1

你不需要.each()因为.on()已适用于每一个项目在列表中。

您的代码已经写入.nav类的每个项目。下面是一个工作代码片段来说明。您可以点击三个项目中的每一个并观察它们消失。如果它不适用于你的应用程序，那一定是由于其他问题。检查你的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(); 
      }); 
     }); 
    });