Metoda next() jQuery do przechodzenia

Przykład

Znajdź następny brat każdego akapitu, wybierając tylko akapity o klasie "selected":

$("p");.next(".selected");.css("background", "yellow");

Spróbuj sam

Definicja i użycie

next() uzyskuje element brata bezpośredniego każdego elementu w dopasowanym zbiorze elementów. Jeśli podano wybór, zwraca następny element brata pasujący do tego wyboru.

Gramatyka

.next(selector)
Parametr Opis
selector Wartość ciągła, zawierająca wyrażenie selekcyjne do dopasowania elementów.

Szczegółowe wyjaśnienie

Jeśli podamy obiekt jQuery reprezentujący zbiór elementów DOM, metoda .next() pozwala nam przeszukać elementy brata bezpośredniego w drzewie DOM i utworzyć nowy obiekt jQuery z dopasowanych elementów.

Ta metoda akceptuje opcjonalne wyrażenie selekcyjne, typu tego, które przekazuję do funkcji $(). Jeśli następny brat pasuje do tego wyboru, pozostanie w nowo utworzonym obiekcie jQuery; w przeciwnym razie zostanie wykluczony.

Pomyśl o poniższej stronie z prostą listą:

<ul>
   <li>list item 1</li>
   <li>list item 2</li>
   <li class="third-item">list item 3</li>
   <li>list item 4</li>
   <li>list item 5</li>
</ul>

Jeśli zaczniemy od projektu trzeciego, możemy znaleźć elementy pojawiające się po nim:

$('li.third-item');.next();.css('background-color', 'red');

Spróbuj sam

Wynik tego wywołania to, że projekt 4 został ustawiony na czerwony tło. Ponieważ nie zastosowaliśmy wyrażenia selekcyjnego, ten element pośledni jest wyraźnie włączony jako część obiektu. Jeśli już zastosowaliśmy wybór, sprawdzimy, czy pasuje przed jego włączeniem.