javascript - jQuery:如何在 jQuery 中将`map`与类一起使用
问题描述
我有一些div
共享同一个类的s .job
。
<div class="job">
<div id="title">Job 1</div>
<div id="description">Lorem ipsum dolor.</div>
</div>
<div class="job">
<div id="title">Job 2</div>
<div id="description">Lorem ipsum dolor.</div>
</div>
<div class="job">
<div id="title">Job 3</div>
<div id="description">Lorem ipsum dolor.</div>
</div>
<div class="job">
<div id="title">Job 3</div>
<div id="description">Lorem ipsum dolor.</div>
</div>
从这些 div 中,我想在这些 div 中创建一个标题数组:
['Job 1', 'Job 2', 'Job 3']
我试过了:
$('.job').map(function(){ $('#title', this).text() })
> w.fn.init [prevObject: w.fn.init(4)]
并且:
$('.job').map(function(){ $('#title', this).text() }).toArray()
> []
和:
$('.job').toArray().map(function(){ $('#title', this).text() })
> [undefined, undefined, undefined, undefined]
没有成功。构建我想要的列表的正确方法是什么?为什么我第一次不返回标题字符串列表?
解决方案
.map()
您应该在using中返回提供的值return
。
$('.job').map(function(){
return $('#title', this).text()
}).toArray();
或者不使用ES6return
$('.job').map((i, ele) => $('#title', ele).text()).toArray();
请注意,您的 html 无效,因为包含重复id
属性,因此请class
改用。
var arr = $('.job').map(function(){
return $('.title', this).text()
}).toArray();
console.log(arr);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="job">
<div class="title">Job 1</div>
<div class="description">Lorem ipsum dolor.</div>
</div>
<div class="job">
<div class="title">Job 2</div>
<div class="description">Lorem ipsum dolor.</div>
</div>
<div class="job">
<div class="title">Job 3</div>
<div class="description">Lorem ipsum dolor.</div>
</div>
<div class="job">
<div class="title">Job 4</div>
<div class="description">Lorem ipsum dolor.</div>
</div>
您也可以使用纯 javascript来完成这项工作
[...document.querySelectorAll(".job .title")].map(v=>v.textContent);
let arr = [...document.querySelectorAll(".job .title")].map(v=>v.textContent);
console.log(arr);
<div class="job">
<div class="title">Job 1</div>
<div class="description">Lorem ipsum dolor.</div>
</div>
<div class="job">
<div class="title">Job 2</div>
<div class="description">Lorem ipsum dolor.</div>
</div>
<div class="job">
<div class="title">Job 3</div>
<div class="description">Lorem ipsum dolor.</div>
</div>
<div class="job">
<div class="title">Job 4</div>
<div class="description">Lorem ipsum dolor.</div>
</div>
推荐阅读
- c++ - ReadProcessMemory 使目标应用程序崩溃
- reactjs - 无法在 React 中添加组件
- python - 包已安装但无法导入
- python - Pyomo 访问/检索双变量 - 带有二进制变量的影子价格
- flutter - Flutter Dart 搜索列表
- python - 如何在 Python 中实现机会/概率?
- angular - 如何为“@types/uuid”用 EcmaScript 替换 CommonJS
- html - 使用下拉菜单并引用查询结果
- python - 在不丢失太多细节的情况下批量缩小图像的最快方法是什么?
- python - 为什么检查说我的模块是内置的?