utilizzare jQuery per selezionare elemento padre di "questo" (elemento cliccato)

Question

Ho uno script jQuery che crea una giostra per ruotare le immagini destra e sinistra al clic dell'utente. All'inizio non avevo intenzione di mettere più di una giostra su una singola pagina, ma ora è arrivata la necessità.

Il problema è, non so come fare riferimento a una giostra (quello cliccato) quando l'utente fa clic su un pulsante.

Heres lo script

$(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 partire da ora, quando si fa clic destro o sinistro su una giostra, tutti loro turno. Non so come ottenere un riferimento al carosello cliccato.

Heres il codice 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> 

Come faccio a ottenere questo, non so come fare riferimento la giostra che l'utente fa clic, perché le frecce sono elementi figlio della giostra.

EDIT: Grazie per le risposte. carousel = $(this).parent() funziona, ma come faccio a verificare se il carosello è: animato usando il selettore e la nuova variabile del carosello?

$ (': animati', giostra)?

Answer 1

All'interno di un gestore di eventi, la variabile:

$(this)

ti porterà l'elemento di chiamata. Da lì, per ottenere il div contenitore è possibile utilizzare la funzione parent():

$(this).parent()

Usa che a piedi attraverso il DOM.

Answer 2

Utilizzare la funzione .parent() salire di un livello. Il vostro codice potrebbe essere simile a questo:

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

     //bunch of code 
    } 

Answer 3

Dal momento che le action tag sono annidati nel primo livello all'interno della giostra, si può fare questo all'interno di ogni funzione per sapere erano appartiene:

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

Will in realtà ottieni l'oggetto genitore, che ora puoi usare.