Question

我有一些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]

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

Answer 1

您应使用.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>

Answer 2

首先，将重复的ID属性更改为类-这不是编写的合法HTML。

已完成操作，您可以使用它来获取文本内容，这比在.map回调中两次调用jQuery以首先找到子节点然后获取其内容的效率更高：

let arr = $('.job .title').get().map(el => el.textContent);

let arr = $('.job .title').get().map(el => el.textContent);
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 3</div>
  <div class="description">Lorem ipsum dolor.</div>
</div>

jQuery：如何在jQuery类中使用`map`

2 个答案: