jquery - odwołanie w klasie do pojedynczego elementu

Question

        <div class="galeryNav">
            kuchnie
        </div>
        <div class="galeryNav">
            sypialnie
        </div>
        <div class="galeryNav">
            zestawy młodzieżowe
        </div>
        <div class="galeryNav">
            szafy
        </div>
        <div class="galeryNav">
            łazienki
        </div>
        <div class="galeryNav">
            biura
        </div>

Mam taki układ na stronie i teraz chciałbym odnieść się do poszczególnych elementów klasy "galeryNav" w jQuery.

Tu pojawia się moje pytanie - jak odwołać się w jquery do tej klasy , ale nie do całości ( 6 divów ) tylko do jednego z nich. Użyć dodatkowego parametru, który byłby unikalny dla każdego ? 

Answer 1

Do tego nie potrzeba Ci jQuery - wystarczy natywny querySelector. Jeśli jednak usilnie chcesz użyć jQuery, to, albo zapisz $( '.galeryNav' )[ 0 ], albo skorzystaj z metody first, która zwróci Ci pierwszy element owrapowany w obiekt jQuery.

Jeśli chcesz odnieść się do konkretnego elementu, ale niekoniecznie pierwszego - to zamiast [ 0 ] zapisz indeks tego elementu.

Comments

rozumiem przez to , że indeksy są rosnąco od góry , od momentu pojawienia się pierwszego diva z klasą galeryNav ?

---

Indeksowanie jest takie jak w tablicach, czyli od zera. Wywołaj sobie w konsoli przeglądarki $( '.galeryNav' ) i zobacz z czego składa się zwrócona lista elementów i jak wygląda numeracja (najeżdżając na kolejny element listy w konsoli powinno Ci ten element podświetlić na stronie).

---

Jest dokładnie tak jak mówisz - wielkie dzięki jeszcze raz :D

Answer 2

To co kluczowe i ważne w Twoim przypadku, to fakt, że kiedy odwołujesz się do jakiegoś elementu chociażby przez klasę (bez względu czy z użyciem jQuery, czy bez) i jest na stronie tych elementów >1, to dostajesz tablicę. Możesz sobie zerknąć jak wygląda ona w console.log(); 

Więc albo odwołujesz się do konkretnego indeksu albo lecisz chociażby pętlą po każdym elemencie i robisz co tam chcesz. Ogólnie nie używam jQuery na co dzień, ale w idei może wyglądać to tak:

let divs = $(".galeryNav");
console.log(divs); // tylko, żeby zerknąć w konsolę

divs[3].innerHTML = "trzeci indeks"

//albo tak:

divs.each(function(indeks, element){
  element.innerHTML += indeks;
});

Jeśli chcesz  mieć pewność do jakiego elementu się odwołujesz i odwołać się do konkretnego, to możesz chociażby ID nadać i wtedy odwołać się do ID. 

Comments

Wielkie dzięki Panowie za szczegółowe objaśnienie jak to działa.  Pozdrawiam !