На этой неделе при создании компонента я наткнулся на проблему, которая заставила задуматься. Нам нужна была кнопка, которая была бы надежной в будущем и перенаправляла пользователей в следующий раздел страницы, независимо от того, каким будет этот раздел.
Для этого варианта использования существует собственная реализация, свойство nextElementSibling :
var nextNode = elementNodeReference . nextElementSibling ;
Однако собственная опция вернет любой родственный элемент дерева DOM, включая сценарии, стили и другие теги. В моем конкретном случае я искал элементы, которые действительно отображались на странице. Вот основные критерии приемлемости функции, которую мы будем писать:
- Мы хотим, чтобы теги
Наконец, мы добавляем последнюю проверку, чтобы убедиться, что наша функция возвращает значение в элементе (поскольку существует вероятность, что наш текущий элемент является последним в иерархии своих родителей). Вот как выглядит окончательный результат:
функция getElementNextSibling ( элемент ) {
const children = Массив . из ( элемент . parentNode . children );
const братья и сестры = дети . фильтр (( ребенок ) => {
child . nodeType === 1 && child ] . tagName ! == " СКРИПТ " && ребенок . tagName ! == " ССЫЛКА " && ребенок . tagName ! == " СТИЛЬ "
});
const currentElementIndex = братья и сестры . indexOf ( элемент );
const nextElementIndex = currentElementIndex + 1 ;
if ( братья и сестры [ nextElementIndex ]) {
return братьев и сестер [ nextElementIndex ];
} еще {
return null ;
}
}
Работа с IE и ES5
Поскольку метод Array.from может возвращать ошибку в Interner Explorer даже при использовании Babel, есть последняя модификация, которую мы можем реализовать, чтобы сделать эту функцию совместимой со старыми браузерами (если она включена в вашу целевую аудиторию ):
функция getElementNextSibling ( элемент ) {
const дети = Массив . прототип . срез . вызов ( элемент . parentNode ]. дети );
// все остальное остается прежним
}
Загрузка...
