Verwenden Sie JQuery zum Auswählen des übergeordneten Elements von "this" (Element angeklickt)

Question

Ich habe ein jQuery-Skript, das ein Karussell zum Drehen von Bildern nach links und rechts beim Klicken mit dem Benutzer erstellt. Zuerst plante ich nicht, mehr als ein Karussell auf einer Seite zu platzieren, aber jetzt ist das Bedürfnis gekommen.

Das Problem ist, ich weiß nicht, wie man sich auf ein Karussell bezieht (das geklickte), wenn der Benutzer eine Taste klickt.

Heres das Skript

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

Ab sofort, wenn Sie rechts oder links auf jedem Karussell klicken, werden alle von ihnen verschieben. Ich weiß nicht, wie man einen Verweis auf das karussell geklickt bekommt.

here die 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> 

Wie würde ich dies erreichen, ich weiß nicht, wie das Karussell zu verweisen, die der Benutzer geklickt hat, weil die Pfeile Kind-Elemente des Karussells sind.

EDIT: Danke für die Antworten. carousel = $(this).parent() funktioniert, aber wie überprüfe ich, ob das Karussell: animiert ist mit dem Selektor und der neuen Karussellvariable?

$ (': animiert', Karussell)?

Answer 1

Innerhalb von einem Event-Handler, die Variable:

$(this)

werden Sie das anruf Element erhalten. Von dort zu bekommen die enthält div können Sie die parent() Funktion:

$(this).parent()

verwenden, die durch das DOM zu gehen.

Answer 2

Verwenden Sie die Funktion .parent(), um eine Ebene nach oben zu gehen. Ihr Code wie folgt aussehen könnte:

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

     //bunch of code 
    } 

Answer 3

Da Ihr Action-Tags in der ersten Ebene im Inneren des Karussells verschachtelt sind, können Sie dies tun, in jeder Funktion zu wissen, waren sie hingehört:

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

Will Sie erhalten das übergeordnete Objekt, das Sie jetzt verwenden können.