使用JQuery选择"this"的父元素(单击元素)

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

截至目前,当您在任何旋转木马上向右或向左单击时,它们都会移动.我不知道如何获得点击旋转木马的参考.

继承人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>

我怎么做到这一点,我不知道如何引用用户点击的旋转木马,因为箭头是旋转木马的子元素.

编辑:谢谢你的答案.carousel = $(this).parent()有效,但如何检查轮播是否:使用选择器动画和新的轮播变量？

$(':动画',旋转木马)？

Answer 1

在事件处理程序内部,变量:

$(this)

会得到你的召唤元素.从那里,要获取包含div,您可以使用parent()函数:

$(this).parent()

用它来浏览DOM.