Jquery 应用于所有具有相同类的 div，但需要单独执行答案

【问题标题】：Jquery being applied to all divs with same class but needs to do each indivudallyJquery 应用于所有具有相同类的 div，但需要单独执行
【发布时间】：2014-10-05 12:05:21
【问题描述】：

我有一些 jQuery，当您单击轮播中的图像时，图像会淡入 youtube/vimeo 视频。

但是，当您单击第一张图片并在视频中淡入淡出时，这将应用于每张轮播幻灯片并在所有幻灯片上淡入视频。有没有办法让它在每张幻灯片上单独执行此操作？

$('.videoImage').click(function() {
            $('.videoImage').fadeOut('slow', function() {
                $(".videoContainer").css("display","block");
            });
        });

HTML：

<ul class="bxslider">
<li>    
    <div class="videoImage">
        <img src="http://placekitten.com/920/500"/>
    </div>
    <div class="videoContainer">
        <iframe id="video" width="560" height="315" src="http://www.youtube.com/embed/g3J4VxWIM6s" frameborder="0" allowfullscreen></iframe>
    </div>
</li>
<li>
    <div class="videoImage">
        <img src="http://placekitten.com/920/500"/>
    </div>
    <div class="videoContainer">
        <iframe src="http://player.vimeo.com/video/17914974" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
    </div>
</li>

【问题讨论】：

标签： jquery carousel slide

【解决方案1】：

使用this获取当前选中的dom，找到next .videoContainer

$('.videoImage').click(function() {
            $(this).fadeOut('slow', function() {
               $(this).next(".videoContainer").css("display","block");
            });
        });

【讨论】：