Доделать код на 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 Сделаю быстро и качественно.
Aktualne zlecenia dla freelancerów w kategorii Javascript & Typescript
Rozwój sceny WebGL/Three.js z generowaniem i eksportem 3D (snapshot) z animowanego shaderaOpis obiektu: Projekt przedstawia designerski stół, wykonany w formie realistycznego, głębokiego wiru (centralna wirówka, która płynnie przechodzi z szerokiego poziomego blatu w cienką, elegancką nogę). Istota zadania: Wymagany jest programista WebGL / Creative Coding do… Javascript & Typescript, Programowanie stron internetowych ∙ 13 godzin 11 minut temu ∙ 18 ofert |
Wsparcie i rozwój strony internetowej firmy sprzątającej
75 PLN
Szukam programisty / webmastera do długoterminowego wsparcia i rozwoju strony internetowej firmy sprzątającej. Strona: https://donely.ca O projekcie DoneLy Home Services — firma świadcząca usługi sprzątania w Kanadzie, która aktywnie się rozwija i rozszerza zasięg działalności.… Javascript & Typescript, Programowanie stron internetowych ∙ 2 dni 15 godzin temu ∙ 59 ofert |
Opracowanie strony internetowej według specyfikacji na FramerTrzeba zrobić stronę według tych parametrów, które są w specyfikacji https://docs.google.com/document/d/1ODO2C9Krb4AaMiJz9wfbNzWlAyA2FwCCHL8r0biajUY/edit?usp=sharing Podajcie rzeczywistą stawkę na podstawie tego projektu Układ HTML i CSS, Javascript & Typescript ∙ 3 dni 16 godzin temu ∙ 27 ofert |
Opracowanie interaktywnej mapy Palworld dla strony internetowejPotrzebna jest interaktywna mapa Palworld na wzór: https://palworld.gg/map Potrzebujemy nie tylko statycznego obrazka, ale pełnoprawnej interaktywnej mapy, na której użytkownik może przeglądać lokalizacje, włączać/wyłączać kategorie obiektów, wyszukiwać potrzebne punkty i… Układ HTML i CSS, Javascript & Typescript ∙ 5 dni 6 godzin temu ∙ 35 ofert |
Rozwój platformy AM Mobility (serwis samochodowy, parking, ubezpieczenie, wynajem samochodów)
21 300 PLN
Szukamy zespołu lub doświadczonego programisty Full Stack do stworzenia MVP platformy AM Mobility. AM Mobility to jednolita cyfrowa ekosystem dla kierowców, łącząca w jednej aplikacji i platformie internetowej: parking; serwis samochodowy; wulkanizację; myjnię samochodową;… Javascript & Typescript, Programowanie stron internetowych ∙ 10 dni 13 godzin temu ∙ 119 ofert |