Как выполнить получение this по индексу через цикл?

Question

[Destell]

Написал небольшой плагин, определяющий, находится ли блок в зоне видимости экрана и что-нибудь с ним делающий, однако обнаружил одну проблему - если на странице несколько блоков с одним классом, к которому привязан плагин, то действие идет сразу на все. Пытался работать с индексом блока и .eq, но что-то пошло не так. От чего можно оттолкнуться для решения этой проблемы?

П.С, вроде дошло, в callback передается весь массив, а не конкретный элемент.

$.fn.viewport = function(options) {
      var _self = this;

     _self.each(function() {
         var _targetElement = $(this);
         _methods.action(_targetElement);
         console.log($(this).index());
      });
}

Код

Answer 1

[Александр Маджугин]

Ну так вы и выполняете действие над всеми элементами. Вы перебираете все элементы и что-то делаете с ними и это с ними происходит.
Вам надо разбираться не с механизмом действия над объектами, а с механизмом определения того, над каким элементом надо выполнить действие.
Вот вы определили какой блок вне зоны видимости - ну и выполняйте действие именно над ним.
Где собственно код который это делает?

Comments

[Destell]

codepen

Тут проходит проверка, находится ли блок ниже верхнего края окна и выше нижнего

visibleTopValidate: function(top, scrollTop, overflow) {
               var _hang = settings.overflow === true ? overflow : top;
               return _hang > scrollTop ? true : false;
            },

            visibleBottomValidate: function(top, scrollEnd, overflow) {
               var _hang = settings.overflow === true ? overflow : scrollEnd;
               return _hang > top ? true : false;
            },

Затем в этом участке кода срабатывает callback, в зависимости от того, виден блок или нет

init: function(top, scrollTop, scrollEnd, topOverflow, bottomOverflow) {
               var _validate = {
                     top: _methods.visibleTopValidate(top, scrollTop, topOverflow),
                     bottom: _methods.visibleBottomValidate(top, scrollEnd, bottomOverflow),
                  };

               (_validate.top === _validate.bottom === true) ? settings.targetVisible.call(_self) : settings.targetHidden.call(_self);
            },

Все значения берутся от _self, т.е. this ($.fn.viewport)

[Александр Маджугин]

Ну так смотрите - во-первых у вас проверка оторвана от проверяемого элемента - вы передаете в нее только значения. Вообще говоря даже в методе которые вызываете колбэк у вас нет элемента. Как он вызовет колбэк для конкретног элемента, если он сам не знает какой элемент он проверяет? В него пришли только чистые значения.
Метод должен вызываться для элемента нарушевшего границу. Не надо вызывать его для всех, а в нем пытаться определить к кому применить действие. А исходя из этого - метод который вызывает колбэк должен получать на вход проверяемые элемент, а не только его значение top. Либо не вызывать колбэк, а возвратить только нужно ли его выполнить, в метод кооторый его вызвал.

Откуда у вас init вызывается?

И да - загуглите метод определения видимости элемента на странице. Он есть нативный - не надо морочаться со всеми этими top, bottom и offset

[Destell]

Александр Маджугин, да, мне внезапно пришла в голову интересная мысль, что callback применяется ко всему массиву, а не к конкретному элементу, когда законсолил this в callback.
П.С.: нативной функции на это не припомню, если, конечно, не возникло недопонимания из-за слова "видимость" - это не проверка на visible, а на попадание элемента в viewport.
П.П.С.: спасибо за советы

[Александр Маджугин]

да, мне внезапно пришла в голову интересная мысль, что callback применяется ко всему массиву, а не к конкретному элементу, когда законсолил this в callback.

ВОТ ИМЕННО! Я это первым же предложением и написал.

> нативной функции на это не припомню,
Я тоже не припомню, поэтму и пишу загуглить. А они есть и уже давно.

> если, конечно, не возникло недопонимания из-за слова "видимость" - это не проверка на visible, а на попадание элемента в viewport.
Именно - попадание во viewport. Недопонимания не возникло.

> П.П.С.: спасибо за советы
кнопочка отметить решением :)

[Stalker_RED]

Александр Маджугин, Destell,

нативной функции на это не припомню,
Я тоже не припомню, поэтму и пишу загуглить.

Вот же!
https://developer.mozilla.org/ru/docs/Web/API/Inte...
Но оно пока сырое, и работает сильно не везде.
Готовую реализацию можно выдернуть из jquery или wow.js

[Александр Маджугин]

Stalker_RED, да, именно оно - спасибо!
Так говорите глючное? Я все собираюсь убраться свой велосипед и заменить на это, на одном большом проекте, но пока руки не дошли.

[Stalker_RED]

Александр Маджугин, там написано "экспериментальная технология", и табличка совместимости с другими браузерами есть. Это не значит "глючное", но в любой момент могут переделать без обратной совместимости. И придется вам править скрипты.