jQuery get DOM structure

Dziś pokażę Wam Drodzy Czytelnicy dwie rzeczy. Po pierwsze jak w jQuery zbadać strukturę html dokumentu, po drugie jak znaleźć html tag danego elementu. Jak każdemu wiadomo, aby w jQuery dostać się do jakiegoś elementu możemy to zrobić przez jakikolwiek znacznik css, id, klase, pierwsze dziecko, ostatnie e-nte. np

idInput = $('#id1');
classInput = $('.class1');
childNode = $('#id2:first-child');

Możemy też odwoływać się do tagów htmla:

input = $('input');
div = $('div');

A teraz od drugiej strony, mamy id obiektu, ale chcemy poznać jaki to tag. Możemy to sprawdzić w prosty sposób.

htmlTag = $('#id1')[0].tagName;
alert(htmlTag);

Dobra tyle z low-level skillów, teraz coś ekstra, wyświetlenie wszystkich elementów htmla, wraz ze wszystkimi zagnieżdżeniami. Ok ,jak to zrobimy? Znajdziemy pierwszych potomków body, później potomków potomków body, następnie potomków potomków potomków body…. and so on. Tak więc musimy mieć metodę która będzie w stanie wskazać nam wszystkie dzieci od podanego rodzica. Mając tą metodę wywołamy ją rekurencyjnie dla każdego elementu. Brzmi prosto, zatem do dzieła!

Metoda która znajdzie wszystkie dzieci elementu:

/*
   $this zajmiemy się za chwilę, na razie przyjmijmy że mamy pod nią $('body')
*/
currentNodeChilds = $this.children();
        
        $.each(currentNodeChilds ,function(i,v){
           htmlTag = $(v)[0].tagName;
           alert(htmlTag);
        }

Powyższa metoda szuka wszystkich dzieci elementu i alertuje ich htmlowe tagi.

Teraz będzie ciekawie, trochę programowania obiektowego, oraz funkcji prywatnych jquery. Chodzi o to że musimy wywoływać tą samą metodę dla n elementów, nie wiemy ile ich będzie więc metoda będzie musiała sprawdzać to sama i wywoływać się tak długo aż nie znajdzie wszystkich elementów.

Zamkniemy naszą metodę w funckę:

nazwa funkcji będzie naszym obiektem, this.search jest funkcją obiektu findChildeNode;

function findChildeNode () {

    this.search = function($this)
    {
        currentNodeChilds = $this.children();
        
        $.each(currentNodeChilds ,function(i,v){
            if($(v) != undefined){
/* dla każdego elementu jeżeli istnieje tworzymy nowy obiekt i wywołujemy tą samą funkcję, która kopie coraz bardziej w głąb */
              var goForNext = new findChildeNode($(v));
              goForNext.search($(v));
/* wywołujemy funkcję w której każde kolejne dziecko staje się rodzicem dla następnych wywołań funkcji */
              
             htmlTag = $(v)[0].tagName;
             alert(htmlTag);
            }
        });
    }
}

Musimy to jeszcze wywołać, jako pierwszy element podajemy body.

 $(document).ready(function(){   
        searchForChildrens = new findChildeNode($('body'));
        searchForChildrens.search($('body'));
});

About the author

Logos

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Możesz użyć następujących tagów oraz atrybutów HTML-a: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>