Доделать код на 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
Співпраця з ІТ-партнером для раннього етапу розробки
67 364 UAH
Опис:Ми шукаємо високомотивовану та надійну особу, щоб приєднатися до нас як партнер проекту для захоплюючого нового підприємства, яке наразі перебуває на ранніх стадіях розвитку. Основна ідея все ще вдосконалюється, і ми відкриті до обговорення оптимального технічного напрямку… AI та машинне навчання, Javascript та Typescript ∙ 46 хвилин тому ∙ 7 ставок |
Шукаю досвідченого Full Stack розробника для створення SaaS-сервісу для інтернет-магазинів.Ідея сервісу: Клієнт завантажує посилання на свій товарний фід (XML або CSV). Сервіс автоматично отримує товари, бере їхні фотографії та створює нові рекламні зображення за готовими шаблонами: ціна, знижка, логотип, акційні плашки тощо. Також у сервісі має бути простий редактор… Javascript та Typescript, Веб-програмування ∙ 2 дні 6 годин тому ∙ 85 ставок |
Розробка WebGL/Three.js сцени з генерацією та експортом 3D (снапшот) з анімованого шейдераОпис об'єкта:Проект являє собою дизайнерський стіл, виконаний у формі реалістичного, глибокого водовороту (центральна воронка, яка плавно переходить з широкої горизонтальної стільниці в тонку витончену ніжку). Суть задачі:Потрібен WebGL / Creative Coding розробник для створення… Javascript та Typescript, Веб-програмування ∙ 3 дні 2 години тому ∙ 30 ставок |
Підтримка та розвиток сайту клінінгової компанії
904 UAH
Шукаю веб-розробника / вебмайстра для довгострокової підтримки та розвитку сайту клінінгової компанії. Сайт: https://donely.ca Про проєкт DoneLy Home Services — компанія з надання послуг прибирання в Канаді, яка активно розвивається та розширює географію роботи. Шукаю… Javascript та Typescript, Веб-програмування ∙ 5 днів 4 години тому ∙ 64 ставки |
Розробка сайту по ТЗ на FramerПотрібно зробити сайт по цим параметрам що в тз https://docs.google.com/document/d/1ODO2C9Krb4AaMiJz9wfbNzWlAyA2FwCCHL8r0biajUY/edit?usp=sharing Називайте реальний рейт на основі цього дизайну HTML та CSS верстання, Javascript та Typescript ∙ 6 днів 5 годин тому ∙ 29 ставок |