Доделать код на jquery для определения цепочки родительских элементов
Есть код на jquery, который при наведении мышки на элементы (в основном ссылки) должен определять их параметры и параметры их родительских элементов. В коде не все работает, нужно взять его за основу и срочно довести до рабочего состояния. В нем не все функции, и он выделяет сразу все (а это неправильно) родительские div вплоть до контейнера всей страницы:
<script type="text/javascript">
$(document).ready(function() {
$('div').bind({
mouseenter: function() {
$(this).children('div:first-child').css('border','1px solid #ff0');
$(this).children('div:first-child').find('a').css('border','1px solid #60ff00');
var stat_parent_class[1] = $(this).children('div:first-child').attr('class');
var stat_selected_href = $(this).children('div:first-child').find('a').attr('href');
$('stat').text(stat_parent_class[1] + '<br>' + stat_selected_href);
},
mouseleave: function() {
$(this).children('div:first-child').css('border','1px solid #fff');
$(this).children('div:first-child').find('a').css('border','1px solid #fff');
}
});
});
</script>
Что должен делать код:
1. Водим мышкой по элементам страницы. Каждый элемент при наведении подсвечивается рамкой #60ff00
2. Код должен определить цепочку его ближайших родительских элементов (до 5 уровней). Т.е. если например html выглядит так:
<div class='d5'>
<div class='d4'>
<div class='d3'>
<div class='d2'>
<div class='d1'>
<span class='s1'>
<a class='a1' href='site.com'>ссылка, на которую навели мышку</a>
</span>
</div>
</div>
</div>
</div>
</div>
То наш код должен найти эту цепочку:
div class='d4' => div class='d3' => div class='d2' => div class='d1' => span class='s1' => a class='a1'
3. Каждый родительский элемент в этой цепочке подсвечивается рамкой своего цвета (зеленый, синий, фиолетовый, красный, оранжевый).
4. Параметры каждого элемента цепочки нужно записать в переменные. Для родительских элементов - это название тэга и его css-класс, а для элемента под мышкой - название тэга, его css-класс, его текст и значение href, если это ссылка. Если какое-либо значение получается пустым или не определено, то записать в переменную нужно не undefined, а "пусто".
5. Переменные называются вот так:
stat_parent_name[1..5] - название тэга
stat_parent_class[1..5] - его css-класс
stat_selected_name - название элемента под мышкой
stat_selected_class - его css-класс
stat_selected_text - его текст
stat_selected_href - его href
Для приведенного выше примера получатся такие значения:
stat_selected_name = "a"
stat_selected_class = "a1"
stat_selected_text = "ссылка, на которую навели мышку"
stat_selected_href = "site.com"
stat_parent_name[1] = "span"
stat_parent_class[1] = "s1"
stat_parent_name[2] = "div"
stat_parent_class[2] = "d1"
stat_parent_name[3] = "div"
stat_parent_class[3] = "d2"
stat_parent_name[4] = "div"
stat_parent_class[4] = "d3"
stat_parent_name[5] = "div"
stat_parent_class[5] = "d4"
Сделать нужно сегодня.
Нужно быть готовым поработать допоздна, если понадобятся исправления и т.д.
-
257 4 0 Сделаю быстро и качественно.
Актуальные фриланс-проекты в категории Javascript и Typescript
Поддержка и развитие сайта клининговой компании
906 UAH
Ищу веб-разработчика / веб-мастера для долгосрочной поддержки и развития сайта клининговой компании. Сайт: https://donely.ca О проекте DoneLy Home Services — компания по предоставлению услуг уборки в Канаде, которая активно развивается и расширяет географию работы. Ищу… Javascript и Typescript, Веб-программирование ∙ 1 день 9 часов назад ∙ 59 ставок |
Разработка сайта по ТЗ на FramerНеобходимо сделать сайт по этим параметрам, что в ТЗ https://docs.google.com/document/d/1ODO2C9Krb4AaMiJz9wfbNzWlAyA2FwCCHL8r0biajUY/edit?usp=sharing Назовите реальный рейд на основе этого дизайна HTML и CSS верстка, Javascript и Typescript ∙ 2 дня 10 часов назад ∙ 26 ставок |
Разработка интерактивной карты Palworld для сайтаНеобходимо разработать интерактивную карту Palworld по примеру: https://palworld.gg/map Нам нужна не просто статическая картинка, а полноценная интерактивная карта, где пользователь может смотреть локации, включать / выключать категории объектов, искать нужные точки и… HTML и CSS верстка, Javascript и Typescript ∙ 4 дня назад ∙ 32 ставки |
Разработка платформы AM Mobility (автосервис, парковка, страхование, аренда автомобилей)
257 282 UAH
Ищем команду или опытного Full Stack разработчика для создания MVP платформы AM Mobility. AM Mobility — это единая цифровая экосистема для автомобилистов, объединяющая в одном приложении и веб-платформе: парковку; автосервис; шиномонтаж; автомойку; аренду автомобилей;… Javascript и Typescript, Веб-программирование ∙ 9 дней 7 часов назад ∙ 119 ставок |
Gsap анимации
1000 UAH
Добрый день. Нужно внести правки в текущем проекте. Нужен специалист, который хорошо работает на gsap/lenis Нужно сделать анимацию карточек. Подробное ТЗ здесь: https://www.figma.com/design/5bLEJudN5LPpB9ZSoJa2Eb/Untitled?m=auto&t=qwyluUctL1lrMNvh-6 Нужно… Javascript и Typescript, Веб-программирование ∙ 9 дней 13 часов назад ∙ 21 ставка |