Czasami zachodzi potrzeba przetworzenia wielu elementów z dokumentu html, np. w przypadku walidacji formularza, lub dowolnego przetworzenia elementu. W jQuery, jest gotowa funkcja, która pozwala nam na pobranie wszystkich elementów dokumentu, zgodnie z modelem DOM.
W przykładzie, który przedstawię, głównym celem jest wylosowanie losowych liczb całkowitych, z zakresu 1-100, dla każdego pola typu input typu text.
Kod
Cały kod odpowiedzialny za to zadanie będzie wyglądał następująco:
function rand ( n ) { return (Math.floor(Math.random()*n+1)); } $(function(){ $('#random').click(function(){ $("input[type=text]").each(function(){ $(this).val(rand(100)); }); return false; }); });
Objaśnienie
Zadeklarowaliśmy dodatkową funkcję rand(), która zwraca liczbę z zakresu 1 do n. Następnie po załadowaniu dokumentu, sprawdzamy, czy użytkownik wykonał zdarzenie click (kliknięcia), na elemencie o id = random, jeśli tak, pobieramy z dokumentu wszystkie elementy input, typu text, korzystając z funkcji each. Funkcja each zwraca id kolejnych elementów, zatem wewnątrz each(function() { kod }), this będzie wskazywał na aktualnie pobrany element. Za pomocą val(), przypiszemy wylosowaną przez nas liczbę, przez wywołanie funkcji rand() z parametrem 100, która zwróci wymaganą przez nas liczbę całkowitą. Na koniec zwracamy false (aby element na który klikniemy, nie przekierowywał nas na żadną inną stronę, jeśli jest to np. link).
Oczywiście nic nie stoi na przeszkodzie, wręcz zalecanym jest, aby zastosować dodatkowo klasę w polu input i odwoływać się tylko do pól z określoną klasą:
$("input[type=text].nazwaKlasy").each(function(){
Wtedy zmianie ulegnie linia z .each jw., co umożliwi nam odwoływanie się do różnych pól, a także grupowanie ich (wystarczy dopisać class=”nazwaKlasy” do znacznika input).
Również możemy dzielić pola wg. konkretnych formularzy odwołując się przykładowo: form#jakiesID input.nazwaKlasy ( wszystkie elementy typu input z class=”nazwaKlasy”, wewnątrz form o id=”jakiesID” ), ale oczywiście kombinacji może być dowolna ilość i właściwie ilość kombinacji zależy od permutacji wszystkich znaczników w naszym dokumencie, wewnątrz których znajduje się wybierany element.
Kod wygląda następująco:
$("form#jakiesID input.nazwaKlasy").each(function(){
Demo
Demonstrację powyższego skryptu można znaleźć w jednym z ostatnio zrealizowanych przeze mnie projektów:
11 odpowiedzi na “jQuery: each()”
Fajny przykład – wszystko prosto i przejrzyście. Ja bym jednak pomyślał nad zrobieniem przykładu, który by pokazał sytuację np jeśli mamy na stronie kilka formularzy czy też więcej pól – tzn. tak jak napisałeś na końcu np. uwzględniać jeszcze klasę pola, aby wypełniać tylko te które chcemy. Rzecz wydaje się być oczywista, ale dla początkującego pewnie taki przykład by się zdał 😀 Pozdro
Masz rację, zrobiłem stosowny update.
No i teraz elegancko – początkującym zapewne taki „dodatkowy” przykład bardziej się przyda niż „suchy” opis 😉
Tego szukałem. Dzięk.
W jakim celu jest umieszczone to DEMO? Samo logowanie nie posiada grama JS a wejść dalej bez hasła …? Rozumiem, że to jakieś niedopatrzenie?
Przykład jak przykład wyjaśniony przejrzyście 🙂 To się chwali.
Bardzo fajny przykładzik 😉
I would have thought of taking an example which showed that such a situation if we are on several forms or more fields – that is, as you wrote at the end for example to have a class field to fill in only those you want. The thing seems to be obvious, but for a beginner such an example probably would have passed
Bardzo przydatne. Pozdro 🙂
The credit loans seem to be useful for guys, which are willing to start their own business. As a fact, it’s easy to receive a bank loan.
łoo, obrazek sugeruje jQuery.each() chciałem sobie więcej coś o tym poczytać, widzę polska strona! a tu zonk, tu zwykłe each
$(„form#jakiesID input.nazwaKlasy”).each(function(){…
chyba form nie jest potrzbeny – mamy id…tlyko jeden form (i tlyko jeden element) może mieć „jakiesId”.
Raczej wystarczy:
$(„#jakiesID input.nazwaKlasy”).each(function(){…