Как сократить код, используя метод each ()?

Question

У меня есть вопрос.У меня есть скрипт:

$(document).ready(function () {
    $(document).on('scroll', function () {

        const windowHeight = $(window).height()
        const scrollValue = $(this).scrollTop();

        const $art1 = $('.art1');
        const art1FromTop = $art1.offset().top
        const art1Height = $art1.outerHeight()

        const $art2 = $('.art2');
        const art2FromTop = $art2.offset().top
        const art2Height = $art2.outerHeight()

        const $art3 = $('.art3');
        const art3FromTop = $art3.offset().top
        const art3Height = $art3.outerHeight()

        const $art4 = $('.art4');
        const art4FromTop = $art4.offset().top
        const art4Height = $art4.outerHeight()

        const $art5 = $('.art5');
        const art5FromTop = $art5.offset().top
        const art5Height = $art5.outerHeight()

        const $art6 = $('.art6');
        const art6FromTop = $art6.offset().top
        const art6Height = $art6.outerHeight()

        const $art7 = $('.art7');
        const art7FromTop = $art7.offset().top
        const art7Height = $art7.outerHeight()

        if (scrollValue > art1FromTop + art1Height / 2 - windowHeight) {
            $art1.addClass('active');
        }

        if (scrollValue > art2FromTop + art2Height / 2 - windowHeight) {
            $art2.addClass('active');
        }

        if (scrollValue > art3FromTop + art3Height / 2 - windowHeight) {
            $art3.addClass('active');
        }

        if (scrollValue > art4FromTop + art4Height / 2 - windowHeight) {
            $art4.addClass('active');
        }

        if (scrollValue > art5FromTop + art5Height / 2 - windowHeight) {
            $art5.addClass('active');
        }

        if (scrollValue > art6FromTop + art6Height / 2 - windowHeight) {
            $art6.addClass('active');
        }

        if (scrollValue > art7FromTop + art7Height / 2 - windowHeight) {
            $art7.addClass('active');
        }
    })
})

Я хотел бы изменить его на более короткий, используя each ().Я имею в виду, что я должен использовать $ ('. Art'), например, чтобы выбрать все div с этим классом, затем мне нужно добавить их числа, повторяющиеся от 1. Это, я думаю, я могу выполнить в одиночку.Но как я могу рассчитать положение прокрутки для каждого элемента?Как я могу занять позицию каждого дива?Должен ли я выбрать его таким, какой я есть сейчас, или я могу использовать для этого «это»?

Answer 1

Когда вы выполняете ту же самую операцию, используйте Множественный селектор , а затем используйте .filter(), чтобы получить согласованный элемент на основе функции, используемой в качестве теста для каждого элемента в наборе.this - текущий элемент DOM.

$(document).on('scroll', function () {

    const windowHeight = $(window).height()
    const scrollValue = $(this).scrollTop();

    var arts = $('.art1, .art2, ..., .art7'); //better $('.art')

    arts.filter(function(){
        const $art = $(this);
        const artFromTop = $art.offset().top
        const artHeight = $art.outerHeight()

        return scrollValue > artFromTop + artHeight / 2 - windowHeight;            
    }).addClass('active');
});