Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [jQuery] Poruszanie się po drzewie DOM
Forum PHP.pl > Forum > XML, AJAX
gebp
Mam problem aby dostać się do odpowiedniego elementu ( w drzewie DOM) za pomocą jQuery (aby przypisać mu zdarzenie onclick) W javascript bym sobie poradził ale chcę się nauczyć chociaż trochę jQuery.
  1. <table id="tab" cellspacing="0" border="1">
  2. <tr>
  3. <td> Chcę się dostać do tego elementu </td>
  4. <td> i tego </td>
  5. <td> i tego </td>
  6. <td> i tego </td>
  7. <td> i tego </td>
  8. <td> i tego </td>
  9. </tr>
  10. <tr>
  11. <td> Ale NIE tego</td>
  12. <td> i tego też nie</td>
  13. <td>ten także jest zabroniony</td>
  14. <td> i ten</td>
  15. <td>WYKLUCZONE</td>
  16. <td> rówież </td>
  17. </tr>
  18. <br />
  19. <button onclick="test('tab')">Test</button>
  20.  


i skrypt (a raczej to co wymyśliłem ale nie działa)
  1. <script type="text/javascript">
  2. function test(idtab){
  3.  
  4. $('#'+idtab).first("tr").each( function (i, el) {
  5. $(el).css("backgroundColor", "yellow");
  6. $(el).click( function () {
  7. alert("to jest komórka nr "+i);}
  8. );
  9. });
  10.  
  11. }
  12.  
  13.  


Dzięki za wszystkie podpowiedzi i wyjaśnienia.

P.S. Wiem że dziwnie (inaczej niż wzorzec jQuery) pisze funkcje jednak tak mi jest wygodniej.
kalmaceta
nie "each'uje" po elemencie <tr> tylko po jego zawartości. hint
gebp
Po kilkunastu próbach i pewnym zdenerwowaniu na jQuery zrobiłem to co chciałem - czyli dostałem się do pierwszego "rzędu" <tr> </tr> (wiersza) i zmieniłem każdej komórce.
Poniżej przedstawiam kod dla innych a także dla sprawdzenia samego siebie - a dokładnie swojego rozumowania.
Jeżeli źle rozumuje to proszę o komentarz.

A więc moim problemem był to iż w drzewie DOM <tabeli> pierwszym nodem jest znacznik <tbody> (nawet jeżeli go nie umieszczamy w html'u). Przynajmniej tak zauważyłem w O, FF i GCh.
  1. function test2(idtab) {
  2.  
  3. $('#'+idtab). // wybieram obiekt o konkretnym id ( tu id="tab)
  4. find("tr"). // znajduje i tworze "tablice" wszystkich <tr></tr>
  5. first(). // ograniczam się do pierwszej linii/wiersza ( <tr></tr>)
  6. children(). // wskazuje że chodzi mi o zawartość tego pierwszego wiersza
  7. each( // i na każdym elemencie (w tym przypadku <td></td>) wykonuje czynności
  8. function (i, el) {
  9. $(el).css("backgroundColor", "yellow");
  10. $(el).click( function () {
  11. alert("to jest komórka nr "+i);}
  12. );
  13. });
  14.  
  15. }
  16.  
  17.  

batman
Sądzę, że tak będzie bardziej czytelne
[JAVASCRIPT] pobierz, plaintext
  1. $("#" + idtab + " tr:first td").css(
  2. "background", "yellow"
  3. ).click(function() {
  4. alert("abc");
  5. });
[JAVASCRIPT] pobierz, plaintext
gebp
Masz racje ~batman. Tak wygląda o wiele ładniej (kurcze nie łapię ciągle tych tr:first td ect).

Jednakże w moim przypadku each() spełnia się o wiele bardziej. W poscie dałem tylko przykład. Dla zobrazowania. A each() jest dla mnie o wiele lepsze ponieważ ma (przynajmniej w jQery ver. 1.4 ) "index" i "element" (.each( function(index, Element) )) co jest dla mnie bardziej użyteczne.

Ale jest "oczywistą oczywistością" że twój sposób zapisu jest ładniejszy
#luq
Tylko musisz zważyć na to, że każda metoda zwraca obiekt jQuery. A więc:
[JAVASCRIPT] pobierz, plaintext
  1. $(...).find(...).first(...).children(...)
[JAVASCRIPT] pobierz, plaintext

będzie wolniejsze jeśli to opisać selektorami.

Nie ma przeszkód żebyś napisał:
[JAVASCRIPT] pobierz, plaintext
  1. $("#" + idtab + " tr:first td").each(...);
[JAVASCRIPT] pobierz, plaintext

i właśnie w ten sposób powinieneś to zrobić.
zegarek84
Cytat(#luq @ 10.01.2011, 21:28:35 ) *
Tylko musisz zważyć na to, że każda metoda zwraca obiekt jQuery. A więc:
[JAVASCRIPT] pobierz, plaintext
  1. $(...).find(...).first(...).children(...)
[JAVASCRIPT] pobierz, plaintext

będzie wolniejsze jeśli to opisać selektorami.

Nie ma przeszkód żebyś napisał:
[JAVASCRIPT] pobierz, plaintext
  1. $("#" + idtab + " tr:first td").each(...);
[JAVASCRIPT] pobierz, plaintext

i właśnie w ten sposób powinieneś to zrobić.
może inaczej winksmiley.jpg - bardziej elegancko to wygląda winksmiley.jpg - zacznę od tego, że druga metoda także opisuje dostęp przez selektory - tyle że css [też nie do końca gdyż first !== first-child] które muszą być prze parsowane zwłaszcza w starszych przeglądarkach... jQuery korzysta z Sizzle i nie każda przeglądarka w pełni obsługuje querySelector [czy jak się ta metoda zwie] - selektory muszą być przeparsowane i musza być wykonane odpowiednie metody po drodze jak getElementsByTagName... to pierwsze co krytykowałeś fakt zwraca obiekt jQuery, potem go modyfikuje lub zwraca nowy [zbyt dawno temu przeglądałem to by być pewny tego], ale większa część jQuery jest napisana na prototype - więc większość metod i własności jest zwracanych przez klonowanie a nie są tworzone od nowa... czasami "brzydszy" kod nie musi być wolniejszy - testy i jeszcze raz testy i to na kilku przeglądarkach - najlepiej skrajne na IE i wkurzającym także google chrome ;] [gdzie chyba wycinając niektóre flaki uzyskali taką szybkość a potem się męcz...]...

ps. wiem - teraz wspomnę o IE - ale też o jQuery... jak mnie poproszono bym rozwiązał problem z IE [którego nie mam na laptopie to musiałem to zrobić na innym kompie] to okazało się, że choć wszystko napisane przez jQuery [nie licząc innych błędów po drodze dla IE] to nie ma tam także zdarzenia 'input' dla IE - to po co wogóle ono tam było jak to nie problem dopisać "piaskownicę" na zdarzenie...

ja wiem o tym:
Cytat
In older, pre-HTML5 browsers, "keyup" is definitely what you're looking for.

In HTML5 there is a new event, "input", which behaves exactly like you seem to think "change" should have behaved - in that it fires as soon as a key is pressed to enter information into a form.

Kod
$('element').bind('input',function);

ale szukaj wiatru w polu jak nie ma się IE ^^

a i children też mi się posypało - a myślałem, że większość rzeczy przemyśleli - a nie zrobili kluczowej [nie wiem jak teraz] - nie przekazali dzieci do "normalnej" tablicy jak to nawet w większości podstawowych tutoriali js jest wspomniane gdy bardziej skomplikowane operacje an dzieciach chcemy zrobić...
#luq
Niestety nie mam czasu na testy. Widzę, że swego czasu zagłębiałeś się w bebechy jQ, fajnie bo dowiedziałem się o Sizzle o którym nie maiłem zielonego pojęcia winksmiley.jpg
No ale chyba oba zaprezentowane wyżej przeze mnie sposoby działają na tych samych mechanizmach, przynajmniej wydaje mi się to naturalne, żeby tak było.

[JAVASCRIPT] pobierz, plaintext
  1. $("#" + idtab + " tr:first td").each(...);
[JAVASCRIPT] pobierz, plaintext

Robi sobie implode i wg kolejnych selektorów "wydłubuje" coraz to bardziej konkretny node.

[JAVASCRIPT] pobierz, plaintext
  1. $(...).find(...).first(...).children(...)
[JAVASCRIPT] pobierz, plaintext

Robi to samo tyle, że między kolejnym "wydłubaniem" tworzy (czy klonuje, nie ważne - po prostu jedna operacja więcej) oraz przekazuje obiekt jQuery.

Może i mój post jest zbyteczny, bo jedynie piszę o tym jak WYDAJE mi się jak jest, aczkolwiek chciałem przedstawić swój tok rozumowania i w żaden sposób nie neguje tego co napisał @zegarek84. Musiałbym zrobić testy. Temat leci do moich zakładek "w wolnej chwili" winksmiley.jpg
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.