logo

Metoda jQuery each().

The każdy() metoda w jQuery określa funkcję uruchamianą dla każdego dopasowanego elementu. Jest to jedna z powszechnie stosowanych metod przechodzenia w JQuery. Korzystając z tej metody, możemy iterować po elementach DOM obiektu jQuery i wykonywać funkcję dla każdego dopasowanego elementu.

The każdy() akceptuje parametr funkcja(indeks,element) która jest funkcją wywołania zwrotnego wykonywaną dla każdego wybranego elementu. Ta funkcja dodatkowo opcjonalnie wymaga dwóch parametrów, którymi są indeks i element. Musimy więc przekazać funkcję wywołania zwrotnego do metody each().

Możemy również wrócić FAŁSZ z funkcji wywołania zwrotnego, aby wcześniej zatrzymać pętlę.

psy półkowe

Składnia

 $(selector).each(function(index, element)) 

Wartości parametrów

Wartości parametrów używane w każdy() metodę definiuje się w następujący sposób.

funkcja(indeks,element): Jest to parametr obowiązkowy. Jest to funkcja wywołania zwrotnego, która jest wykonywana dla każdego wybranego elementu. Ma dwie wartości parametrów, które są zdefiniowane w następujący sposób.

    indeks:Jest to wartość całkowita określająca położenie indeksu selektora.element:To jest bieżący element. Możemy użyć tego słowa kluczowego, aby odnieść się do aktualnie dopasowanego elementu.

Zobaczmy kilka ilustracji, aby zrozumieć każdy() metoda wyraźnie.

Przykład 1

W tym przykładzie każdy() Metoda zostanie uruchomiona po kliknięciu przycisku. Stosujemy tę metodę do To elementy. Zatem ta metoda będzie iterować po każdym z nich To element. Funkcja jest wykonywana dla każdego wybranego To i wyświetla odpowiedni tekst To element za pomocą pola alertu.

Tutaj nie używamy wartości parametrów funkcji wywołania zwrotnego.

 jQuery each() method <h2> Welcome to the javaTpoint.com </h2> <ul> <li> First element </li> <li> Second element </li> <li> Third element </li> <li> Fourth element </li> </ul> <p> Click the following button to see the list of <b> li </b> elements. </p> Click me function fun(){ $(document).ready(function(){ $(&apos;li&apos;).each(function(){ alert($(this).text()) }); }); } 

Wyjście

sortowanie listy Java
Przetestuj teraz

Po wykonaniu powyższego kodu wyjściem będzie -

Metoda jQuery each().

Po kliknięciu przycisku wyświetli się alert w następujący sposób.

Metoda jQuery each().

Podobnie zostaną wyświetlone cztery okna alertów z powodu czterech To elementy.

c# zawiera ciąg

Przykład2

W tym przykładzie używamy wartości parametrów funkcji wywołania zwrotnego, które są indeks I element .

Stosujemy każdy() metoda włączona To elementy. Zatem metoda będzie iterować po elementach li, zaczynając od indeksu 0 . Zostanie wykonane na każdym wybranym To element i zmień kolor tła odpowiedniego elementu.

Iteracja kończy się po powrocie funkcji FAŁSZ . Tutaj jest ich sześć To elementów, a funkcja zatrzymuje się, gdy dotrze do elementu za pomocą identyfikator = 'i4' . Co prawda jest to czwarty element, ale indeks zaczyna się od 0 , więc położenie elementu wynosi 3 .

 jQuery each() method body{ text-align: center; } ul{ list-style-type: none; float: left; } li { width: 40px; height: 40px; margin: 5px; padding: 5px; font-size: 20px; float: left; border: 2px solid blue; } button{ font-size: 20px; } <h2> Welcome to the javaTpoint.com </h2> <ul> <li> 1 </li> <li> 2 </li> <li> 3 </li> <li id="i4"> Stop </li> <li> 5 </li> <li> 6 </li> </ul> Click me function fun() { $(document).ready(function(){ $(&apos;li&apos;).each(function(index, element) { $(element).css(&apos;background&apos;, &apos;lightgreen&apos;); if ($(this).is(&apos;#i4&apos;)) { $(&apos;p&apos;).text(&apos;Index begins with 0. So, the function stopped at position: &apos; + index ).css(&apos;fontSize&apos;, &apos;20px&apos;); return false; } }); }); } 

Wyjście

Przetestuj teraz

Po wykonaniu powyższego kodu i kliknięciu danego przycisku wyjściem będzie -

Metoda jQuery each().