Forum PHP.pl > [JavaScript]Typ najgłębiej zagnieżdzonego elementu

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JavaScript]Typ najgłębiej zagnieżdzonego elementu

Dapi

26.02.2014, 16:08:41

Witam!
Potrzebuję pobrać za pomocą JS/jQuery pobrać typ najgłębiej zagnieżdzonego dziecka na który nastąpiło kliknięcie.

Przykładowy kod do którego odnosi się problem:

[HTML] pobierz, plaintext 
<a href="#"><u><i><b>1234</b>56789</i></u></a>
[HTML] pobierz, plaintext

Po kliknięciu w "1234" chciałbym dostać "B", natomiast po klinięciu w "56789", chciałbym dostać "I".

Kod

$('div.main').on('click', '*', function(e){ /*reszta*/ this.nodeName /*reszta*/})

niestety nie zawsze zwraca mi najgłębiej zagnieżdzony element, tzn w tym przykładzie dla "1234" zwraca "I", a dla "56789" zwraca "U".

Kombinować z odwołaniami do dzieci chyba nie mogę, bo nigdy nie wiem, które dziecko z kolei zostało kliknięte.

Najlepiej by było, gdyby dało się to osiągnąć bez dodatkowych bibliotek.

Jakieś pomysły, jak to osiągnąć?

owca_82

26.02.2014, 17:37:18

Kod

document.getElementsByTagName('a')[0].onclick = function(event){

alert(event.target.nodeName);

};

online -> http://jsfiddle.net/8bKzw/1/

Dapi

26.02.2014, 18:14:25

Obawiam się, że ustawianie akcji dla każdego elementu z osobna nie przejdzie...
Potrzebuję po kliknięciu w link podświetlić jednego diva, po kliknięciu w pogrubienie podświetlić innego, po kliknięciu na czysty tekst usunąć podświetlenie, a jeśli link będzie pogrubiony, podświetlić oba (tu mogę pobrać rodziców, mając najgłębsze dziecko).
Do tego idealnie pasowałoby jQuerowe on('click', '*', function()), ale ono niezbyt celnie określa typ elementu

owca_82

26.02.2014, 21:12:52

Nie ustawiam akcji dla każedego elementu z osobna tylko korzystam z tzw. event delegation

Może tak -> http://jsfiddle.net/yUW2X/6/

Dapi

26.02.2014, 21:18:11

Trochę na około, ale mniej więcej sobie poradziłem.

Kod

$('body').on('click', 'div.main', function(e){
    $('.toolbar > div').removeClass('hover');
});
$('div.main').on('click', 'a', function(e){
    setTimeout(function(){
        $('.toolbar > div.anchor').addClass('hover');
    },50);
});
$('div.main').on('click', 'b', function(e){
    setTimeout(function(){
        $('.toolbar > div.bold').addClass('hover');
    },50);
});

Opóźnienie musi być, ze względu na kolejność wykonywania funkcji. Sądzę, że można je jeszcze zmniejszyć, choć już i tak jest niezauważalne praktycznie.

Dzięki za naprowadzenie

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.