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:

    });

});

Предположим, что количество видео на странице или дочерних родительских объектов «control» не ограничено. То есть я не хочу использовать $(this).parent().parent().find('.video').

Answer 1

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

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

поломка ...

$(this) получает класс "play" div

.parent() получает класс "control" div

.prev() получить предыдущий элемент (то есть соответствующий div класса "video")

вот пример JS Fiddle для демонстрации работающей концепции

Answer 2

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

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

Answer 3

ближайший метод кажется здесь подходящим

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

Answer 4

Примерно так:

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

Answer 5

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

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