[jQuery] Poruszanie się po drzewie DOM Opcje

[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.

[HTML] pobierz, plaintext 
<table id="tab" cellspacing="0" border="1">
<tbody>
  <tr>
    <td> Chcę się dostać do tego elementu </td>
    <td> i tego </td>
    <td> i tego </td>
    <td> i tego </td>
    <td> i tego </td>
    <td> i tego </td>
  </tr>
  <tr>
    <td> Ale NIE tego</td>
    <td> i tego też nie</td>
    <td>ten także jest zabroniony</td>
    <td> i ten</td>
    <td>WYKLUCZONE</td>
    <td> rówież </td>
  </tr>
</tbody>
</table>
<br />
<button onclick="test('tab')">Test</button>
 
[HTML] pobierz, plaintext 

i skrypt (a raczej to co wymyśliłem ale nie działa)

[HTML] pobierz, plaintext 
<script type="text/javascript">
function test(idtab){
 
$('#'+idtab).first("tr").each( function (i, el) {	
   $(el).css("backgroundColor", "yellow");
   $(el).click( function () { 
     alert("to jest komórka nr "+i);}
   );
}); 
 
}
 
 
</script>
[HTML] pobierz, plaintext 

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

Ten post edytował kalmaceta 8.01.2011, 11:11:45

[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.

[HTML] pobierz, plaintext 
function test2(idtab) {
 
	$('#'+idtab).  // wybieram obiekt o konkretnym id ( tu id="tab)
	 find("tr").     // znajduje i tworze "tablice" wszystkich <tr></tr>
	 first().         // ograniczam się do pierwszej linii/wiersza ( <tr></tr>)
	 children().   // wskazuje że chodzi mi o zawartość tego pierwszego wiersza 
	 each(         // i na każdym elemencie (w tym przypadku <td></td>) wykonuje czynności
                  function (i, el) {	
                      $(el).css("backgroundColor", "yellow");
                      $(el).click( function () { 
                      alert("to jest komórka nr "+i);}
               );
       }); 
 
}
 
 
[HTML] pobierz, plaintext 

[batman]

Sądzę, że tak będzie bardziej czytelne

[JAVASCRIPT] pobierz, plaintext 
$("#" + idtab + " tr:first td").css(
	"background", "yellow"
).click(function() {
	alert("abc");
});
[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 
$(...).find(...).first(...).children(...)
[JAVASCRIPT] pobierz, plaintext 

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

Nie ma przeszkód żebyś napisał:

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

i właśnie w ten sposób powinieneś to zrobić.

[zegarek84]

Tylko musisz zważyć na to, że każda metoda zwraca obiekt jQuery. A więc:

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

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

Nie ma przeszkód żebyś napisał:

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

i właśnie w ten sposób powinieneś to zrobić.

może inaczej - bardziej elegancko to wygląda - 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:

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ć...

Ten post edytował zegarek84 11.01.2011, 00:40:38

[#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
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 
$("#" + 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 
$(...).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"