jQuery：访问唯一父级中包含的唯一对象？

Question

假设以下布局：

<span class="container">
    <video class="video">
        <source ... />
    </video>
    <div class="controls">
        <div class="play">Play</div>
    </div>
</span>

使用 jQuery，我在文档加载上添加单击功能，如下所示：

$(document).ready(function() {

    $('.playpause').click(function() {

        var play = $(this);
        var video = ''; // D:

    });

});

假设页面上的视频数量或“控件”的子父对象的数量没有限制。这意味着我不想使用 $(this).parent().parent().find('.video')。

Answer 1

最接近的方法 似乎很适合这里

$(this).closest('.container').find('.video');

Answer 2

$(".video", $(this).parents(".container"))

应该有效。

Answer 3

您可以使用 prev() 函数 获取前一个元素，因此无论数量如何，这都会起作用父容器内的视频和/或控件元素...

var video = $(this).parent().prev();

细分...

$(this) 获取“play”类 div

.parent() 获取“ control" class div

.prev() 获取前一个元素（即匹配的“video”类 div）

这里是一个示例 JS Fiddle 来展示概念的工作原理

Answer 4

我只需在链接上添加一个包含视频参考的数据元素：

玩

然后

var video = $(this).data('ref');

Answer 5

像这样的东西：

var video = $('video', $(this).parentsUntil('span', '.container'));