我有一些 div
共享同一个类 .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]
没有成功。构建我想要的列表的正确方法是什么?为什么我的第一个不返回标题字符串列表?
最佳答案
您应该使用 return
在 .map()
中返回提供的值。
$('.job').map(function(){
return $('#title', this).text()
}).toArray();
或者使用ES6而不使用return
$('.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>
关于javascript - jQuery:如何将 `map` 与 jQuery 中的类一起使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53830623/