jQuery：如何在 jQuery 中将“map”与类一起使用

Question

我有一些div共享同一类的 s .job。

\n\n

<div class="job">\n  <div id="title">Job 1</div>\n  <div id="description">Lorem ipsum dolor.</div>\n</div>\n<div class="job">\n  <div id="title">Job 2</div>\n  <div id="description">Lorem ipsum dolor.</div>\n</div>\n<div class="job">\n  <div id="title">Job 3</div>\n  <div id="description">Lorem ipsum dolor.</div>\n</div>\n<div class="job">\n  <div id="title">Job 3</div>\n  <div id="description">Lorem ipsum dolor.</div>\n</div>\n

\n\n

我想从这些 div 中创建一个标题数组：

\n\n

[\'Job 1\', \'Job 2\', \'Job 3\']\n

\n\n

我试过了：

\n\n

$(\'.job\').map(function(){ $(\'#title\', this).text() })\n> w.fn.init\xc2\xa0[prevObject: w.fn.init(4)]\n

\n\n

并且：

\n\n

$(\'.job\').map(function(){ $(\'#title\', this).text() }).toArray()\n> []\n

\n\n

和：

\n\n

$(\'.job\').toArray().map(function(){ $(\'#title\', this).text() })\n> [undefined, undefined, undefined, undefined]\n

\n\n

没有成功。构建我想要的列表的正确方法是什么？为什么我的第一个不返回标题字符串列表？

\n

Answer 1

您应该返回.map()using中提供的值return。

$('.job').map(function(){ 
  return $('#title', this).text() 
}).toArray();

或者使用ES6而不使用return

$('.job').map((i, ele) => $('#title', ele).text()).toArray();

请注意，您的 html 无效，因为包含重复的id属性，因此请改用class。

$('.job').map(function(){ 
  return $('#title', this).text() 
}).toArray();

$('.job').map((i, ele) => $('#title', ele).text()).toArray();

您也可以使用纯 javascript来完成这项工作

[...document.querySelectorAll(".job .title")].map(v=>v.textContent);

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>