如何将函数应用于类的所有元素

Question

I have a function that I'd like to apply to several elements of the same class. It's a scroll page function and I need it to only execute once. So I put it in a wrapper. It works but I'd like to be able to just add a class to an element and have it act upon that element. I tried iterating through the elements and using addClass to add a unique class with their respective index added to the end but this did not work. What I have now only acts upon the first element with the "split" class.

//EXECUTES ONLY ONCE
function once(fn, context) { 
    var result;
    return function() { 
        if(fn) {
            result = fn.apply(context || this, arguments);
            fn = null;
        }
        return result;
    };
}
// Usage
//var split1 = once(function() {
//  fadeInText(".split1");
//});
const handlers = $(".split").toArray()
   .map(s => ({ el: $(s), show: once(() => fadeInText(s)) }));

$(window).scroll(function() {
    for(const {el, show} of handlers) {
    if( $(this).scrollTop() + $(window).height() > el.offset().top) 
       show();
  }
});

//SPLITTEXT
var f = ".split",
fadeInText(f);
function fadeInText(l) {
var el = document.querySelector(l);
var split = el.dataset.split;
var text = new SplitText(el, { type: split });
var tl = new TimelineMax({ paused: false });
var splitEls = text[split];
var wrapEls = function wrapEls(els) {
    return els.map(function (el) {
        return '<span style="display: inline-block">' + el.innerText + '</span>';
    });
};
var wrapped = wrapEls(splitEls);

splitEls.forEach(function (el, i) {
    el.style.overflow = 'hidden';
    el.innerHTML = wrapped[i];
});

var masks = splitEls.map(function (el) {
    return el.querySelector('span');
});

tl.staggerFrom(masks, 1.25, { skewY: 4, y: '200%', ease: Expo.easeOut, delay: 0.9 }, 0.1, 'in');
    return l;
}

Answer 1

$('.class').each(function(){ /* 'this' means the element */})

在函数内部， this可以被限制你在迭代的元素。

Answer 2

if you want a pure js application try this:

elements = document.querySelectorAll('.class');

elements.forEach((element, key) => {
        //your code
})