javascript - 此上下文在我的 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>

有人可以解释为什么这个用法在我的代码中根本不起作用吗？我缺少什么？

谢谢。

亚历克斯。

Answer 1

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

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

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

浏览文档的其余部分，我在 API 中找不到对此行为/功能的直接引用，因此它可能是也可能不是您在未来版本中可以依赖的东西，而只是一个其实现方式的副作用。