Use JQuery para seleccionar el elemento padre de "this" (elemento presionado)

Question

Tengo un script jQuery que crea un carrusel para rotar las imágenes a la izquierda y derecha al hacer clic en el usuario. Al principio, no estaba planeando poner más de un carrusel en una sola página, pero ahora ha llegado la necesidad.

El problema es que no sé cómo hacer referencia a un carrusel (el que se hizo clic) cuando el usuario hace clic en un botón.

Heres el guión

$(function() 
{ 
    // Put last item before first item, in case user clicks left 
    $('.carousel li:first').before($('.carousel li:last')); 

    // Right click handler 
    $('.right-button img').click(function() 
    { 
     // Get width plus margins 
     var item_width = $('.carousel li').outerWidth() + (2 * parseInt($('.carousel li').css('margin-right'))); 

     // Get left indent 
     var orig_left_indent = $('.carousel').css('left'); 

     // Calculate new left indent 
     var left_indent = parseInt(orig_left_indent) - item_width; 

     $('.carousel:not(:animated)').animate({'left': left_indent}, 500, 'swing', function() 
     { 
      // Put first item after last item 
      $('.carousel li:last').after($('.carousel li:first')); 

      // Set left indent to default 
      $('.carousel').css({'left': orig_left_indent}); 
     }); 
    }); 

    // Left click handler 
    $('.left-button img').click(function() 
    { 
     // Get width plus margins 
     var item_width = $('.carousel li').outerWidth() + (2 * parseInt($('.carousel li').css('margin-right'))); 

     // Get left indent 
     var orig_left_indent = $('.carousel').css('left'); 

     // Calculate new left indent 
     var left_indent = parseInt(orig_left_indent) + item_width; 

     $('.carousel:not(:animated)').animate({'left': left_indent}, 500, 'swing', function() 
     { 
      // Put last item before first item 
      $('.carousel li:first').before($('.carousel li:last')); 

      // Set left indent to default 
      $('.carousel').css({'left': orig_left_indent}); 
     }); 
    }); 

    // Close button handler 
    $('.carousel-container .close-button img').click(function() 
    { 
     $('.carousel-container').fadeOut(1000); 
    }); 
}); 

A partir de ahora, cuando se hace clic derecho o izquierdo en cualquier carrusel, todos ellos turno. No sé cómo hacer clic en una referencia al carrusel.

aquí está el código HTML

<div class="carousel-container clearfix"> 
    <div class="header close-button"> 
     <strong>Check These Out</strong> 
     <?php echo html::image('media/images/close.gif'); ?></div> 
    <div class="left-button"><?php echo html::image('media/images/left_arrow.png'); ?></div> 
     <div class="carousel-inner"> 
      <ul class="carousel"> 
       <?php foreach ($items as $item): ?> 
       <li> ... </li> 
       <?php endforeach; ?> 
      </ul> 
     </div> 
    <div class="right-button"><?php echo html::image('media/images/right_arrow.png'); ?></div> 
</div> 

¿Cómo voy a lograr esto, no sé cómo hacer referencia al carrusel de que el usuario ha hecho clic, ya que las flechas son elementos secundarios del carrusel.

EDIT: Gracias por las respuestas. carousel = $(this).parent() funciona, pero ¿cómo puedo comprobar si el carrusel está: animado utilizando el selector y la nueva variable de carrusel?

$ (': animated', carrusel)?

Answer 1

Dentro de un controlador de eventos, la variable:

$(this)

le conseguirá el elemento que llama. A partir de ahí, para obtener el div que contiene se puede utilizar la función parent():

$(this).parent()

uso que caminar a través del DOM.

Answer 2

Utilice la función .parent() para subir un nivel. Su código podría ser algo como esto:

$('.right-button img').click(function() 
    { 
     carousel = $(this).parent(); 

     //bunch of code 
    } 

Answer 3

Desde sus etiquetas de acción se anidan en el primer nivel dentro del carrusel, se puede hacer esto dentro de cada función a conocer fueron pertenece:

var parent = $(this).parent().get(0); 

Will de hecho te conseguirá el objeto principal, que ahora puedes usar.