Utilisez JQuery pour sélectionner l'élément parent de "this" (élément cliqué)

Question

J'ai un script jQuery qui crée un carrousel pour faire pivoter les images à gauche et à droite lors du clic de l'utilisateur. Au début, je n'avais pas l'intention de mettre plus d'un carrousel sur une seule page, mais maintenant le besoin est arrivé.

Le problème est, je ne sais pas comment faire référence à un carrousel (celui cliqué) lorsque l'utilisateur clique sur un bouton.

Heres le 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 partir de maintenant, lorsque vous cliquez à droite ou à gauche sur un carrousel, tous les quarts de travail. Je ne sais pas comment obtenir une référence au carrousel cliqué.

Heres le code 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> 

Comment puis-je obtenir cela, je ne sais pas comment référencer le carrousel que l'utilisateur a cliqué, car les flèches sont des éléments enfants du carrousel.

EDIT: Merci pour les réponses. carousel = $(this).parent() fonctionne, mais comment vérifier si le carrousel est: animé à l'aide du sélecteur et de la nouvelle variable carrousel?

$ (': animé', carrousel)?

Answer 1

A l'intérieur d'un gestionnaire d'événements, la variable:

$(this)

vous obtiendrez l'élément d'appel. De là, pour obtenir les contenant div vous pouvez utiliser la fonction parent():

$(this).parent()

utiliser pour marcher dans les DOM.

Answer 2

Utilisez la fonction .parent() monter d'un niveau. Votre code pourrait ressembler à ceci:

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

     //bunch of code 
    } 

Answer 3

Étant donné que vos balises d'action sont imbriqués dans le premier niveau à l'intérieur du carrousel, vous pouvez le faire à l'intérieur de chaque fonction de savoir étaient il appartient:

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

Will En fait, vous obtenez l'objet parent, que vous pouvez maintenant utiliser.