所以我得到了这段 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 多个这样的玩家。标签中的 ID 当然会在每个下一个玩家 body 中增加。 我如何使用 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?
});
但是在上面的函数中，我如何在不使用它的 id 的情况下访问音频播放器标签？正如我所说，我希望方法是通用的，我不能只重复它们 30 多次。
最佳答案
来自.mute图标...查找 parent matching .player-body ...然后向下看，使用 .find() , 对于 <audio>使用 .player 的标签类...
您现在有了目标元素!
然后简单地mute it ...好吧...您需要 DOM 元素，而不是 jQuery 对象。但是你有它使用 [0]针对 jQuery 对象，因为 DOM 元素是第一个属性。
具体来说，它是一个衬垫:
$('.mute').on('click', function(){
$(this).parents(".player-body").find(".player")[0].muted = true;
});
这就是所谓的“遍历”DOM 元素……
你只需要知道 a couple用于导航的 jQuery 方法。 ;)
关于javascript - 访问 jQuery 中的重复标签，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55012935/