如何获取具有特定 ID 的 div 中的下一个元素

Posted 2023-02-25

【中文标题】如何获取具有特定 ID 的 div 中的下一个元素

【英文标题】：How to get the next element in a div with a specific Id

【发布时间】：2016-12-19 17:22:18

【问题描述】：

对 js 相当陌生，因此尝试了解基础知识。

我有一个项目，其中有一个包含歌曲列表的 div：

<div id="songs">
  <p>01 a la verticale <span class="title">[play]</span></p>
  <audio class="song" id="verticale" src="Songs/01_a_la_verticale.mp3" onended="audioEnd()"></audio>

  <p>02 éphémère <span class="title">[play]</span></p>
  <audio class="song" id="ephemere" src="Songs/02_ephemere.mp3" onended="audioEnd()"></audio>

  <p>03 geste humain <span class="title">[play]</span></p>
  <audio class="song" id="geste" src="Songs/03_geste_humain.mp3" onended="audioEnd()"></audio>

  <p>04 la seule chose <span class="title">[play]</span></p>
  <audio class="song" id="chose" src="Songs/04_la_seule_chose.mp3" onended="audioEnd()"></audio>
</div>

在我的 html 中，每个 p 标签都有一个跨度，上面写着“play”，我正在尝试实现该功能。

我知道如何使用 .play 和 .pause 等...但我的问题是如何获取点击歌曲的音频元素。这是我尝试过的：

jQuery :

  $(".title").click(function() 
      var myAudioElement = $(this).parent().next("#song");
      var myId = myAudioElement.attr('id');

      alert(myId);
);

我现在只想找到元素。我的逻辑是标签跨度在 p 标签内，因此，从单击的跨度开始，我需要先到达其父级（p 标签），然后带有参数“song”的 next() 将给我下一个元素（音频）在具有歌曲 ID 的 div 中。

但警报框返回“未定义”。

我做错了什么？

【参考方案1】：

你有一个错字。 song 是一个类，而不是一个 id：

var myAudioElement = $(this).parent().next(".song");

【参考方案2】：

通过 nextElementSibling DOM 属性获取紧随其后的下一个元素（下一个紧随其后的同级元素）。这不应与 nextSibling DOM 属性混淆，后者将返回最初指定节点之后的任何节点。

【讨论】：

@GoneCoding，也是 JS。查看标签。

@GoneCoding JQuery 是 javascript

@Ionut：认真的吗？它还说 HTML。您选择最接近的特定主题。 nextElementSibling 不是“jQuery 方式”。 .next() 是。

【参考方案3】：

你可以简单地使用：

$(this).parent().next("audio");
//Or also using the general class 'song'
$(this).parent().next(".song");

希望这会有所帮助。

$(".title").click(function() 
  var myAudioElement = $(this).parent().next("audio");
  var myId = myAudioElement.attr('id');

  console.log(myId);
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="songs">

  <p>01 a la verticale <span class="title">[play]</span></p>
  <audio class="song" id="verticale" src="Songs/01_a_la_verticale.mp3" onended="audioEnd()"></audio>

  <p>02 éphémère <span class="title">[play]</span></p>
  <audio class="song" id="ephemere" src="Songs/02_ephemere.mp3" onended="audioEnd()"></audio>

  <p>03 geste humain <span class="title">[play]</span></p>
  <audio class="song" id="geste" src="Songs/03_geste_humain.mp3" onended="audioEnd()"></audio>

  <p>04 la seule chose <span class="title">[play]</span></p>
  <audio class="song" id="chose" src="Songs/04_la_seule_chose.mp3" onended="audioEnd()"></audio>
</div>