Jak ustalić, czy element jest ostatnim lub pierwszym dzieckiem rodzica w javascript/jquery?

Question

Mam następujący kod, emulując kliknięcie lewym lub prawym klawiszem w dół zdarzeń. Jest stosowany jako część galerii pokaz slajdów:

$(document).keydown(function (e) { 
        if(e.keyCode == 37) { // left 
         $(".thumb-selected").prev().trigger('click'); 
        } 
        else if(e.keyCode == 39) { // right 
         $("thumb-selected").next().trigger('click'); 
        } 
       }); 

Zasadniczo Znalazło następnego lub poprzedniego rodzeństwa (w zależności od wciśniętego klawisza) i wywołać zdarzenie click, które będą z kolei wyświetli odpowiedni obraz w galerii. Te obrazy są przechowywane na nieuporządkowanej liście.

Miejsce, w którym jestem zaskoczony, to to, że po wybraniu pierwszego lub ostatniego obrazu i kliknięciu lewego lub prawego przycisku (odpowiednio), chcę, aby uzyskać następne zdjęcie na drugim końcu listy obrazów. Na przykład, jeśli pierwsze zdjęcie zostanie wybrane i naciśnięta zostanie lewa strzałka; biorąc pod uwagę, że nie ma poprzedniego obrazu (lub li elementu), otrzyma on ostatni obraz z listy. W ten sposób klawisze nigdy nie tracą funkcjonalności.

Czy w jquery znajduje się funkcja, która sprawdzi, czy obecny element jest pierwszym lub ostatnim dzieckiem jego jednostki nadrzędnej, lub zwróci indeks względem swojego elementu nadrzędnego, aby móc porównać jego indeks z rozmiarem()) jego elementu macierzystego?

Answer 1

var length = $('#images_container li').length; 
    if(e.keyCode == 37) { // left 
     if($('.thumb-selected').index() > 0) 
       $(".thumb-selected").prev().trigger('click'); 
     else 
       $('.thumb-container').eq(length-1).trigger('click'); 
    } 

    else if(e.keyCode == 39) { // right 
     if($('.thumb-selected').index() < length-1) 
      $("thumb-selected").next().trigger('click'); 
      else 
       $('.thumb-container').eq(0).trigger('click'); 
    } 

.thumb-container jest elementem dominującym wszystkie kciuki. Przynajmniej to, co dostałem z twojego kodu.

HTML

<ul class="thumb-container"> 
     <li>thumb</li> 
     <li>thumb</li> 
      . 
      . 
      . 
    </ul> 

Answer 2

Możesz użyć wartości index(), która zwraca indeks elementu lub możesz użyć funkcji prev() i next(), aby sprawdzić, czy jest jeszcze jeden element.

if(e.keyCode == 37) { // left 
    if($(".thumb-selected").prev().length > 0)){ 
     $(".thumb-selected").prev().trigger('click'); 
    }else{ 
     //no more elements      
     } 
} 
else if(e.keyCode == 39) { // right 
    if($(".thumb-selected").next().length > 0)){ 
     $(".thumb-selected").next().trigger('click'); 
    }else{ 
     //no more elements      
     } 
} 

EDIT - I uaktualniony kod, ponieważ to sprawia, że ​​więcej sensu używać next() i prev() zamiast nextAll() i prevAll()

Answer 3

Można użyć metody is()^[docs] do testu:

if($(".thumb-selected").is(':first-child')) { 
    // whatever 
} else if($(".thumb-selected").is(':last-child')) { 
    // whatever 
}