Доступ к повторяющимся тегам в jQuery

Question

Итак, у меня есть этот фрагмент HTML (это mp3-плеер):

<div id="player-body_0" class="player-body">
    <audio id="player_0" class="player">
        <source src="http://www.noiseaddicts.com/samples_1w72b820/2543.mp3" type="audio/mpeg" />
    </audio>

    <div id="audio-player_0" class="audio-player">
        <div id="controls_0" class="controls">
            <i id="play_0" class="fa fa-play play"></i>
            <span id="start-time_0" class="time start-time">00:00</span>
            <div id="progressbar_0" class="progressbar"></div>
            <span id="time_0" class="time">00:00</span>
            <i id="mute_0" class="fa fa-volume-up mute" onclick=""></i>
            <div id="volume_0" class="volume"></div>
        </div>
    </div>
</div>

код генерируется автоматически, так что я мог бы иметь более 30 таких игроков на одном сайте.Идентификаторы в тегах, конечно, будут увеличиваться в каждом следующем теле игрока.Как я могу управлять всеми этими игроками с помощью общих методов в jQuery?Для управления кнопкой отключения звука у игрока может быть что-то вроде этого:

var mute_button = $('.mute'); 
var player = document.getElementById('player_0');

mute_button.click(function() {
    $(this); //clicked mute button
    //how to easily access proper audio tag without using its id?
});

Но как в приведенной выше функции я мог получить доступ к тегу аудиоплеера без использования его идентификатора?Как я уже сказал, я хочу, чтобы методы были общими, я не могу просто повторить их более 30 раз.

Answer 1

Еще одна альтернатива closest(), но только в том случае, если id согласованы в одном и том же аудиоплеере, может получить это id и использовать его для нацеливания на соответствующий аудиоплеер:

Пример:

$('.mute').on('click', function()
{
    let id = $(this).attr("id").split("_")[1];
    let audPlayer = $('#player_' + id);
});

Answer 2

От значка .mute ... Поиск для родительского соответствия .player-body ... Затем поиск, используя .find(), для тега <audio>используя класс .player ...

Теперь у вас есть целевой элемент!

Затем просто отключите его ... Хорошо ... Вам нужен элемент DOM, а не объект jQuery.Но у вас есть это, используя [0] против объекта jQuery, потому что элемент DOM является первым свойством.

Конкретно, это один слой:

$('.mute').on('click', function(){
    $(this).parents(".player-body").find(".player")[0].muted = true;
});

Это то, что называется «обход»Элементы DOM ...
Вы просто должны знать пару jQuery методов для навигации.;)

Answer 3

Вы можете использовать метод closest для таргетинга на контейнер, который включает элементы управления и игрока.

$('.mute').on('click', function() {
    const $player = $(this).closest('.player-body').find('.player');
});