Комментарии пользователя Dima Polos

Почему плывет верстка на iphone 5s?

Dima Polos @dimovich85

Сафари?

Как получить номер элемента в массиве по клику?

Dima Polos @dimovich85 Куратор тега JavaScript

Дмитрий Дербенев, bhudh написал вариант тоже классный и лаконичный и современный, и после освоения js советую этот современный синтаксис изучить: вот видео, и не только видео.
Дело в том, что es6 сейчас можно юзать, но с полифилами и обрабатывать через babel.

var cellsArray = [ ...document.querySelectorAll('td') ];

- это по сути перезапись массива в массив, в моем варианте я тоже самое делал в цикле for, разница в том, что так лаконичнее и переменных меньше, так как querySelectorAll сразу распаковывается и записывается в новый массив. "...Obj" это называется spread оператор, три точки перед объектом внутри другого объекта как команда распаковки одного объекта в другой.
Переписать массивы пришлось, так как у обычного массива есть метод indexOf, а querySelectorAll возвращает объект типа NodeList, у которого нет этого метода. indexOf принимает параметр и возвращает порядковый номер этого элемента в массиве, у которого этот метод вызван, если переданный элемент в нем есть, если нет, то indexOf вернет, внезапно, -1.
Также в примере указаны стрелочные функции, это тоже из es6, их особенность в том, что они сохраняют контекст, this, который, скажем, во внешней среде, до объявления функции. В случаях, когда вешаете eventListener стрелочная функция может сыграть злую шутку, если вместо e.target Вы захотите просто обратится к this, так как this теперь станет таким, каким был в области видимости перед объявлением функции, в данном примере this станет window. Сейчас модно писать стрелочные функции, потому что как бы экономим на слове function, скобках и так далее, а еще такая форма записи помогает не писать return.
У этого способа есть плюсы, что теперь не важно, будут новые элементы, или нет, индекс получаем с помощью indexOf, а не из дата атрибутов.
В конце примера с помощью forEach проходимся по массиву и на каждый элемент вешаем обработку события, вот тут можно как раз как в моем варианте, просто на родителя повесить, например на тег table, и искать с помощью e.target, задействуя всплытие событий.

Войдите на сайт