piątek, Kwiecień 24th, 2009

jQuery: each()

jquery .each()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:

Systemy Ogólne – Marszruty uniwersalne

Be Sociable, Share!

Kategorie: jquery
Możesz śledzić komentarze do tego wpisu poprzez kanał RSS 2.0. Możesz również napisać własny komentarz, lub umieścić odnośnik do tego wpisu, na swojej stronie.

12 komentarze/y

Kwiecień 25, 2009

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ł :D Pozdro


Kwiecień 28, 2009
admin

Masz rację, zrobiłem stosowny update.


Kwiecień 28, 2009

No i teraz elegancko – początkującym zapewne taki „dodatkowy” przykład bardziej się przyda niż „suchy” opis ;)


Styczeń 23, 2010

Tego szukałem. Dzięk.


Listopad 17, 2010
Piotr

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.


Grudzień 28, 2010

Bardzo fajny przykładzik ;)


Wrzesień 11, 2011

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


Listopad 23, 2011

Bardzo przydatne. Pozdro :)


Grudzień 10, 2011

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.


Kwiecień 9, 2012

Hello
Fantastic write-up, First-class story it is definitely, This important is just a tremendously nicely structured post
Thank you!


Październik 29, 2012
góral :-)

łoo, obrazek sugeruje jQuery.each() chciałem sobie więcej coś o tym poczytać, widzę polska strona! a tu zonk, tu zwykłe each


Styczeń 27, 2014
piotr

$(„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(){…


  • *

    Spam Protection by WP-SpamFree