Cómo determinar si el elemento es el último o el primer elemento secundario de los elementos principales en javascript/jquery?

Question

Tengo el siguiente código, que emula un clic en los eventos de tecla abajo a la izquierda o a la derecha. Esto se utiliza como parte de una presentación de diapositivas galería:

$(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'); 
        } 
       }); 

Esencialmente se recoge la siguiente o anterior de hermanos (dependiendo de la tecla pulsada) y llamar al evento click que a su vez mostrar la imagen apropiada en la galería. Estas imágenes están todas almacenadas en una lista desordenada.

Donde estoy perplejo es que cuando se selecciona la primera o la última imagen y se presiona el botón izquierdo o derecho (respectivamente), quiero que aparezca la siguiente imagen en el extremo opuesto de la lista de imágenes. Por ejemplo, si se selecciona la primera imagen y se presiona la flecha hacia la izquierda; dado que no hay una imagen previa (o elemento li), obtendrá la última imagen en la lista. De esta forma, las teclas nunca pierden funcionalidad.

Hay una función en jquery que verificará si el elemento presente es el primero o el último hijo de su elemento primario, o devolverá su índice relativo a su elemento primario para que pueda comparar su índice con el tamaño() (número de hijos) de su elemento padre?

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 es el elemento principal de la todos los pulgares. Al menos lo que obtuve de tu código.

HTML

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

Answer 2

Puede usar index() que devuelve el índice del elemento o puede usar prev() y next() para verificar si hay un elemento más.

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      
     } 
} 

EDITAR - He actualizado el código, ya que hace más sentido usar next() y prev() en lugar de nextAll() y prevAll()

Answer 3

Usted puede utilizar el método is()^[docs] a prueba:

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