Question

Assume the following layout:

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

Using jQuery I’m adding a click function on document load, like so:

$(document).ready(function() {

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

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

    });

});

Assume there is no limit to the number of videos on the page or child parent objects of “controls”. Meaning I don’t want to use $(this).parent().parent().find('.video').

Answer 1

The closest method seems like a good fit here

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