我有一些同班同学。
<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()
返回return
中提供的值。
$('.job').map(function(){
return $('#title', this).text()
}).toArray();
或使用不
return
的ES6$('.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>