为什么此事件仅绑定到与选择器匹配的一个元素？

Question

I have this little piece of jQuery, which is supposed to bind a one-time event to each element matching the selector when they come into view:

jQuery(document).ready(function($) {   
    if (jQuery.browser.mobile === false) {
         $('.featureswrap img.left').css('opacity', 0).one('inview', function(isInView) {
            if (isInView) {$(this).addClass('animated fadeInLeftBig delayp1');}
        });
        $('.featureswrap img.right').css('opacity', 0).one('inview', function(isInView) {
            if (isInView) {$(this).addClass('animated fadeInRightBig delayp1');}
        });
    }
});

However, it only seems to be binding to one (seemingly random) element on the page (per selector, so two total elements). At first I thought I was misunderstanding ".one()", but I don't think that's the case. The CSS function work properly for every element matching the selector, but the inView event only binds to one per selector. Perhaps it is "this" I am misunderstanding, or something else entirely?

Some help here would be greatly appreciated. The page throws no errors and otherwise works as intended. There is no other JavaScript of any kind that could interfere with the event binding or that even interacts with the same elements.

Answer 1

Solved this problem by using .each to attach event to each element. Here's the updated, working code:

jQuery(document).ready(function($) {
    if (jQuery.browser.mobile === false) {
        $('.featureswrap img.left').each(function(index){
            $(this).css('opacity', 0).one('inview', function(isInView) {
                if (isInView) {$(this).addClass('animated fadeInLeftBig delayp1');}
            });
        });
        $('.featureswrap img.right').each(function(index){
            $(this).css('opacity', 0).one('inview', function(isInView) {
                if (isInView) {$(this).addClass('animated fadeInRightBig delayp1');}
            });
        });
    }
});