"इस" (तत्व क्लिक किए गए) के मूल तत्व का चयन करने के लिए JQuery का उपयोग करें

Question

मेरे पास एक jQuery स्क्रिप्ट है जो उपयोगकर्ता क्लिक पर छवियों को बाएं और दाएं घुमाने के लिए एक कैरोसेल बनाता है। सबसे पहले, मैं एक पृष्ठ पर एक से अधिक कैरोसेल डालने की योजना नहीं बना रहा था, लेकिन अब आवश्यकता आ गई है।

समस्या यह है कि, मैं नहीं जानता कि उपयोगकर्ता एक बटन पर क्लिक करते समय एक कैरोसेल (एक क्लिक किया गया) का संदर्भ कैसे लेता है।

यहाँ स्क्रिप्ट

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

फिलहाल, जब आप सही या किसी हिंडोला पर छोड़ दिया क्लिक करें, उन सभी को शिफ्ट। मुझे नहीं पता कि कैरोसेल पर संदर्भ कैसे प्राप्त किया जाए।

यहाँ एचटीएमएल

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

मैं यह कैसे प्राप्त होगा, मैं हिंडोला है कि उपयोगकर्ता क्लिक किया संदर्भित करने के लिए कैसे जानता है, क्योंकि तीर हिंडोला के बच्चे तत्व हैं।

संपादित करें: उत्तर के लिए धन्यवाद। carousel = $(this).parent() काम करता है, लेकिन मैं कैसे जांचूं कि कैरोसेल है: चयनकर्ता और नए कैरोसेल चर का उपयोग करके एनिमेटेड?

$ ('एनिमेटेड', कैरोसेल)?

Answer 1

एक ईवेंट हैंडलर, चर के अंदर

:

$(this)

आप बुला तत्व मिल जाएगा। वहाँ से, प्राप्त करने के लिए युक्त div आप माता-पिता() फ़ंक्शन का उपयोग कर सकते हैं:

$(this).parent()

उपयोग कि डोम के माध्यम से चलने के लिए।

Answer 2

.parent() फ़ंक्शन का उपयोग एक स्तर पर जाएं। आपका कोड कुछ इस तरह दिख सकता है:

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

     //bunch of code 
    } 

Answer 3

के बाद से अपनी कार्रवाई टैग हिंडोला अंदर प्रथम स्तर में नेस्ट कर रहे हैं, तो आप प्रत्येक समारोह के अंदर ऐसा कर सकते हैं पता करने के लिए थे यह अंतर्गत आता है:

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

विल वास्तव में आपको मूल वस्तु मिलती है, जिसे आप अब उपयोग कर सकते हैं।