jquery - 如何从多个列表项中的元素中获取值
问题描述
我有很多div
元素li
。我想从课堂.Value
和.Name
. 如何以这种格式获取这些值:
25,ok
80,good
90,no
<ul>
<li>
<div class="...">
<div class="...">
....
<div class="Value">25</div>
<div class="Name">ok</div>
</div>
</div>
</li>
<li>
<div class="...">
<div class="...">
....
<div class="Value">80</div>
<div class="Name">good</div>
</div>
</div>
</li>
<li>
<div class="...">
<div class="...">
....
<div class="Value">90</div>
<div class="Name">no</div>
</div>
</div>
</li>
...
</ul>
解决方案
给定 HTML 的结构,您可以遍历li
元素并使用它map()
来创建一个对象数组,这些对象包含div.Value
和.Name
div 的文本值,如下所示:
var arr = $('ul li').map(function() {
var $li = $(this);
return {
value: $li.find('.Value').text(),
name: $li.find('.Name').text()
}
}).get();
console.log(arr);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>
<div class="...">
<div class="...">
....
<div class="Value">25</div>
<div class="Name">ok</div>
</div>
</div>
</li>
<li>
<div class="...">
<div class="...">
....
<div class="Value">80</div>
<div class="Name">good</div>
</div>
</div>
</li>
<li>
<div class="...">
<div class="...">
....
<div class="Value">90</div>
<div class="Name">no</div>
</div>
</div>
</li>
</ul>
或者,您可以使用相同的技术返回二维数组中的值,如下所示。不过,我更喜欢前者。
var arr = $('ul li').map(function() {
var $li = $(this);
return [[ $li.find('.Value').text(), $li.find('.Name').text() ]]
}).get();
console.log(arr);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>
<div class="...">
<div class="...">
....
<div class="Value">25</div>
<div class="Name">ok</div>
</div>
</div>
</li>
<li>
<div class="...">
<div class="...">
....
<div class="Value">80</div>
<div class="Name">good</div>
</div>
</div>
</li>
<li>
<div class="...">
<div class="...">
....
<div class="Value">90</div>
<div class="Name">no</div>
</div>
</div>
</li>
</ul>
推荐阅读
- pointers - 如何在不指定类型的情况下修改函数输入参数?
- java - 如何使用带有 JAVA 的 AWS Route 53 API 检查域名可用性
- javascript - 需要帮助使用 vanilla webgl 中的帧缓冲区将位置渲染到纹理
- php - 在列表中查找下一个缺失的日期
- c++-winrt - Is it possible to send virtual key code from Windows Runtime Component authored in C++/WinRT?
- linux - how to show disk percentage in specific folder
- c++ - 从 system32 而不是本地文件夹加载的 dll
- mysql - 无法在 Ubuntu 中启动 MySQL 服务器
- python - 使用 Selenium python 进行滑块定位和自动化
- html - 使用 VBA 确定 HTML 表格单元格的颜色