用el标签如何获取列表中的第一个元素？

Posted 2023-05-12

例如：在jsp中获取<%List<Order> orderList = (List<Order>)request.getAttribute("orderList");%>
<%=orderList.get(0).getOrderID()%>
该如何用el/jstl标签来获取

例如：在jsp中获取

<%List<Order>

orderList =(List<Order>)request.getAttribute("orderList");%>
<%=orderList.get(0).getOrderID()%>
方法：可以用 $ListData[0].属性获取。

EL表达式简介

EL（Expression Language） 是为了使JSP写起来更加简单。表达式语言的灵感来自于 ECMAScript 和 XPath 表达式语言，它提供了在 JSP 中简化表达式的方法，让Jsp的代码更加简化。

EL语法用法

1、语法结构

$expression

2、[ ]与.运算符

EL 提供“.“和“[ ]“两种运算符来存取数据。

当要存取的属性名称中包含一些特殊字符，如 . 或 - 等并非字母或数字的符号，就一定要使用“[ ]“。例如：

$ user. My-Name应当改为$user["My-Name"]

如果要动态取值时，就可以用“[ ]“来做，而“.“无法做到动态取值。例如：

$sessionScope.user[data]中data 是一个变量

3、变量

EL存取变量数据的方法很简单，例如：$username。它的意思是取出某一范围中名称为username的变量。

因为我们并没有指定哪一个范围的username，所以它会依序从Page、Request、Session、Application范围查找。

假如途中找到username，就直接回传，不再继续找下去，但是假如全部的范围都没有找到时，就回传""。

属

参考技术A $ListData[0].属性

如何从javascript中的列表中获取音频元素的src

【中文标题】如何从javascript中的列表中获取音频元素的src

【英文标题】：how get src of audio elemnt from list in javascript

【发布时间】：2019-02-07 15:11:54

【问题描述】：

当我点击播放它的按钮时，如何获取audio 标签的源代码？

我有很多li标签，每个li包含三个标签：

一个a 标签，它获取将要播放的曲目的来源。 => 完成 一个audio标签，类似于之前的元素；我只是用它来获取 src 并准备好使用 3 元素获取它。 => 还没有完成 一个button标签，它获取与之相关的audio标签的src。

当我单击每个按钮时，我希望该函数将audio 或a 标记的src 返回给我，它们在同一个li 标记中与之对应。

这是我的代码：

<ul id="playList">
  <li>
    <a href="audio/track1.mp3">track1</a>
    <audio src="audio/track1.mp3" id="aud"></audio>
    <button onclick="getTrack()">get this track src</button>
  </li>
  <li>
    <a href="audio/track2.mp3">track2</a>
    <audio src="audio/track2.mp3" id="aud"></audio>
    <button onclick="getTrack()">get this track src</button>
  </li>
  <li>
    <a href="audio/track3.mp3">track3</a>
    <audio src="audio/track3.mp3" id="aud"></audio>
    <button onclick="getTrack()">get this track src</button>
  </li>
</ul>

【参考方案1】：

我认为siblings 是您正在寻找的。你可以像下面这样使用它：

function getTrack(elm)
let $aud = $(elm).siblings( "audio" ).first();
console.log($aud.attr("src"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="playList">
  <li>
    <a href="audio/track1.mp3">track1</a>
    <audio src="audio/track1.mp3" id="aud"></audio>
    <button onclick="getTrack(this)">get this track src</button>
  </li>
  <li>
    <a href="audio/track2.mp3">track2</a>
    <audio src="audio/track2.mp3" id="aud"></audio>
    <button onclick="getTrack(this)">get this track src</button>
  </li>
  <li>
    <a href="audio/track3.mp3">track3</a>
    <audio src="audio/track3.mp3" id="aud"></audio>
    <button onclick="getTrack(this)">get this track src</button>
  </li>
</ul>

---

编辑：代码说明：

首先在buttons 的onclick 中，您应该传递this 关键字，以便您可以在回调函数中检索按钮元素：

<button onclick="getTrack(this)">get this track src</button>

在onclick 回调函数内部，参数elm 是被点击的按钮元素，我们将使用$(elm) 将其转换为jquery 元素以使用它的siblings 函数返回按钮的兄弟姐妹元素。这里我们使用"audio" 选择器，因为我们只想检索按钮的audio 兄弟，而first() 是因为siblings 函数将返回匹配元素的列表，而我们只需要第一个元素。

let $aud = $(elm).siblings( "audio" ).first();

所以现在$aud 是与按下的按钮关联的audio 元素，我们应该使用attr 函数获取它的src 属性。

console.log($aud.attr("src"));

【讨论】：

我不理解鳕鱼，但它的工作原理谢谢兄弟

@salah，看看我的编辑，希望你现在能理解。

【参考方案2】：

onclick 可以接受代表“点击”事件的参数（如onclick="getTrack(event)"）。在函数内部，该点击事件有一个 .target 属性，您可以使用它进入 DOM 并获取按钮元素本身。然后你可以“走”上 DOM 树并选择不同的元素，例如：

function getTrack(event)
  const btn = event.target;
  const li = btn.parentElement;
  const audio = li.children[1];
  const src = audio.getAttribute("src");
  console.log(src);

【参考方案3】：

始终为元素使用唯一 id。在函数调用时传递元素并从中获取 href 属性

function getTrack(id)


console.log(id.getAttribute("src"))

<ul id="playList">
  <li>
    <a href="audio/track1.mp3" >track1</a>
    <audio src="audio/track1.mp3" id="aud1"></audio>
    <button onclick="getTrack(aud1)">get this track src</button>
  </li>
  <li>
    <a href="audio/track2.mp3" >track2</a>
    <audio src="audio/track2.mp3" id="aud2"></audio>
    <button onclick="getTrack(aud2)">get this track src</button>
  </li>
  <li>
    <a href="audio/track3.mp3"  >track3</a>
    <audio src="audio/track3.mp3" id="aud3"></audio>
    <button onclick="getTrack(aud3)">get this track src</button>
  </li>
</ul>

【参考方案4】：

如果不使用 jQuery，您可以使用 previousElementSibling 获取按钮对应的 audio 元素，并获取它的 src 值。

在这里，我还删除了内联 JS，并在使用 querySelectorAll 从 DOM 中选择按钮后使用了 addEventListener，这是编写 JS 的现代方式，并使您的标记更精简。我使用destructuring assignment 从点击的元素中获取previousElementSibling 并将其重新标记为“音频”。

const buttons = document.querySelectorAll('#playList button');
[...buttons].forEach(button => button.addEventListener('click', getTrack, false));

function getTrack() 
  const  previousElementSibling: audio  = this;
  console.log(audio.src);

<ul id="playList">
  <li>
    <a href="audio/track1.mp3">track1</a>
    <audio src="audio/track1.mp3" id="aud"></audio>
    <button>get this track src</button>
  </li>
  <li>
    <a href="audio/track2.mp3">track2</a>
    <audio src="audio/track2.mp3" id="aud"></audio>
    <button>get this track src</button>
  </li>
  <li>
    <a href="audio/track3.mp3">track3</a>
    <audio src="audio/track3.mp3" id="aud"></audio>
    <button>get this track src</button>
  </li>
</ul>