jQuery Waypoint中的每个循环

Question

我在Waypoints中无法使用$ .each（）。 我看过其他一些使用相同方法的stackoverflow帖子。 所以我可能会缺少一些东西。 请帮忙！

我在JSFiddle上有它： https ://jsfiddle.net/rs80dmn5/5/

这是html：

<ul class="col-sm-6">
                <li>
                    <h2>10<span>year</span></h2>
                    <h2>100,000<span>miles</span></h2>
                    <p>Powertrain<br/>Warranty</p>
                </li>
                <li>
                    <h2>5<span>year</span></h2>
                    <h2>60,000<span>miles</span></h2>
                    <p>Limited Warranty</p>
                </li>
                <li>
                    <h2>5<span>year/unlimited miles</span></h2>
                    <h2>24<span>hour</span></h2>
                    <p>Roadside Assistance</p>
                </li>
                <li>
                    <p>You have certain expectations when looking for a new car and one of the most important is that it will last, which is why we back every Hyundai with “America’s Best Warranty.” It’s our way of showing how much confidence we have in the quality of the vehicles we make so you’ll have the confidence of knowing that the joy of ownership is one that will last for today, tomorrow and years down the road.</p>
                    <a href="#">Learn more about our Warranty</a>
                    <p><small>*America’s Best Warranty claim based on total package of warranty programs. See dealer for LIMITED WARRANTY details.</small></p>
                </li>
            </ul>

这是我的CSS：

    ul,li {
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  height: 500px;
  width: 100%;
  display: block;
}

li h2 {
  font-size: 110px;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        margin-top: 20px;
    }
    100% {
        opacity: 1;
        margin-top: 0px;
    }
}

h2.fadeup {
    animation-name: fadeIn;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-direction: normal;
}
li h2 span {
  font-size: 20px;
}

这是我的JS：

$(document).ready(function(){

    $('h2').each( function(){

        $(this).waypoint({

            handler: function(){

                $(this).addClass('fadeup');

            }

        });

    });

});

我没有任何错误。 但是什么也没发生。

Answer 1

$（this）.waypoints中的$（this）（{。指代路点对象，而不是元素h2

尝试这个：

$('h2').each(function(){

    var self = $(this);

    $(this).waypoint({
         handler: function(){
             self.addClass('fadeup');
         }
    });
})

Answer 2

您缺少$ .each函数的两个重要参数。 对于jQuery-selections，请使用element代替this 。

$(document).ready(function(){
    $('h2').each( function(index, element){
        $(element).waypoint({
            handler: function(){
                $(element).addClass('fadeup');
            }
        });
    });
});