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

closest method кажется хорошей пригонки здесь

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

Answer 2

Я просто добавить элемент данных со ссылкой видео по ссылке: Играть Затем

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

Answer 3

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

должен работать.

Answer 4

вы можете использовать prev() function, чтобы получить предыдущий элемент, так что это будет работать независимо от количества видео и/или контролирует элементы внутри родительского контейнера ...

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

пробоя ...

$(this) получает "играть" класс DIV

.parent() получает "Элементы управления" класс Дива

.prev() получить предыдущий элемент (т. согласование "видео" класс ДИВ)

here is a sample JS Fiddle to show the concept working

Answer 5

Что-то вроде этого:

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