这个上下文在我的waypoints.js片段中不起作用

Question

我一直在忙着waypoints.js一段时间（jQuery.waypoints），基本上我正在尝试使用这个库为某个容器元素的子元素添加动画，我以下面的方式做：

    var waypoints = $('#collection').waypoint(function() {
            $('#collection .col-md-3').each(function(){
                        var $this = $(this);

                        var elem_class = $(this).attr('data-anim-name');
                        var elem_delay = $(this).attr('data-anim-delay');

                        $this.css({
                            '-webkit-animation-delay' : elem_delay,
                            '-moz-animation-delay' : elem_delay,
                            'animation-delay' : elem_delay
                        });

                        $this.addClass(elem_class);

            });
    }, {
        offset: '25%'
    }); 

注意我在传递给路点的函数内所做的选择：

$('#collection .col-md-3').each(function(){

现在上面的代码工作正常，但是当我重新编写上面的代码时：

$('.col-md-3' , this).each(function(){ 

我的代码确实无效，因为我担心我的代码完全正确，因为this确实是#collection。那为什么代码工作呢？

我的HTML结构如下所示：

<section id="collection">
  <div class="col-md-3"></div>
  <div class="col-md-3"></div>
  <div class="col-md-3"></div>
  <div class="col-md-3"></div>
</section>

有人可以解释为什么在我的代码中根本不能使用它吗？我错过了什么？

谢谢。

啤酒-X。

Answer 1

在大多数jQuery函数中，你是对的 - 你可以使用this作为第二个参数的上下文，它通常绑定到正在处理的元素。但是，对于航点，回调函数具有绑定为this的不同对象。以下是从他们的网站收集的一个例子：

因此，在航点回调处理程序中，您可以使用this.element作为上下文：

var waypoints = $('#collection').waypoint(function() {
    $('.col-md-3', this.element).each(function(){
        var $this = $(this);
        //etc

查看其余文档，我无法在API中找到对此行为/功能的直接引用，因此它可能会或可能不会依赖于在将来的版本中工作，而只是一个它是如何实施的副作用。