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

【问题标题】：jQuery: Access unique object contained within unique parent?jQuery：访问包含在唯一父级中的唯一对象？
【发布时间】：2012-01-11 17:15:31
【问题描述】：

假设如下布局：

<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')。

【问题讨论】：

你的问题不清楚。也许您正在寻找$(this).closest('.video')？

标签： javascript jquery containers parent

【解决方案1】：

closest method 似乎很适合这里

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

【讨论】：

OP 说“.container”元素中可能有多个“.video”

【解决方案2】：

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

应该可以。

【讨论】：

【解决方案3】：

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

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

故障...

$(this) 获取“播放”类 div

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

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

here is a sample JS Fiddle to show the concept working

【讨论】：

【解决方案4】：

我只需在链接上添加一个带有视频参考的数据元素：玩那么

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

【讨论】：

【解决方案5】：

类似这样的：

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

【讨论】：