Question

假设以下布局：

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

使用jQuery我在文档加载时添加了一个click函数，如下所示：

$(document).ready(function() {

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

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

    });

});

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

Answer 1

closest method似乎很适合

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

Answer 2

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

应该有用。

Answer 3

您可以使用prev() function获取上一个元素，因此无论父容器中的视频和/或控件元素的数量是多少都可以使用...

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

...击穿

$(this)获取“play”类div

.parent()获取“控件”类div

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

here is a sample JS Fiddle to show the concept working

Answer 4

我只是在链接上添加一个带有视频参考的数据元素：玩然后

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

Answer 5

这样的事情：

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

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

5 个答案: