Страницы

Поиск по вопросам

четверг, 11 июля 2019 г.

Выбор элементов с проверкой их родителей

Нужно выбрать те span на странице, которые не являются потомками заголовков (h1 - h6). Есть много селекторов для потомков, но вот селектора, который бы проверял принадлежность родителю, я, увы, не нашел.
Пример:
one

HEY

two

HEY2

three
Нужно выбрать span'ы за исключением тех, что в h2 и h3


Ответ

Выбираем все на странице. Для каждого пробегаемся по всем его родителям вплоть до document (можно было и только до ). Проверяем имя тега каждого родителя. Если оно входит в - , то отбрасываем этот Все оставшиеся считаются результатом.
document.addEventListener('DOMContentLoaded', onDomReady); function onDomReady() { var allSpans = document.getElementsByTagName('span'); var resultSpans = []; var regExp = /^H\d$/i; for (var i = 0; i < allSpans.length; i++) { var parent = allSpans[i].parentNode; while (parent != document) { if (regExp.test(parent.tagName)) { break; } parent = parent.parentNode; } if (parent == document) { resultSpans.push(allSpans[i]); } } for (var i = 0; i < resultSpans.length; i++) { resultSpans[i].style.color = 'red'; } }; not in hX

simple

not in hX, but in div
deep

То же самое с jQuery (если кому-то понадобится):
$(document).ready(function() { var headers = []; for (var i = 0; i <= 9; i++) { headers.push('h' + i); } var headersSelector = headers.join(','); var $resultSpans = $('span').filter(function() { return $(this).parents(headersSelector).length == 0; }); $resultSpans.css('color', 'red'); }); not in hX

simple

not in hX
deep

Комментариев нет:

Отправить комментарий