Kategorie
jquery

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!

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

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.

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

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

Możliwość komentowania jest wyłączona.