Użyj JQuery, aby wybrać element macierzysty z "this" (element kliknięty)

Question

Mam skrypt jQuery, który tworzy karuzelę, aby obracać obrazy w lewo i prawo po kliknięciu użytkownika. Na początku nie planowałem umieszczać więcej niż jednej karuzeli na jednej stronie, ale teraz nadszedł już czas.

Problem polega na tym, że nie wiem, jak odnieść się do jednej karuzeli (kliknięcia), gdy użytkownik kliknie przycisk.

Herezje skrypt

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

W chwili obecnej, po kliknięciu prawo lub w lewo na każdej karuzeli, wszystkie z nich zmiany. Nie wiem, jak uzyskać odniesienie do klikniętej karuzeli.

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

Jak by to osiągnąć, nie wiem jak odwołać karuzelę, że użytkownik kliknął, bo strzały są elementy potomne karuzeli.

EDYCJA: Dzięki za odpowiedzi. carousel = $(this).parent() działa, ale jak sprawdzić, czy karuzela jest: animowana za pomocą selektora i nowej zmiennej karuzeli?

$ (": animowany", karuzela)?

Answer 1

Wewnątrz obsługi zdarzeń, zmiennej:

$(this)

będzie Ci element wywołujący. Stamtąd, aby uzyskać zawierający div można użyć funkcji rodzic():

$(this).parent()

używać, aby przejść przez DOM.

Answer 2

Użyj funkcji .parent() do wyższego poziomu. Kod może wyglądać mniej więcej tak:

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

     //bunch of code 
    } 

Answer 3

Ponieważ tagi działania są zagnieżdżone w pierwszym poziomie wewnątrz karuzeli, można to zrobić wewnątrz każdej funkcji znać było, że należy:

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

Will faktycznie dostaniesz obiekt nadrzędny, który możesz teraz użyć.