javascript - 如何将 html 中的项目添加到 JavaScript 中的数组？

Question

我想创建一个数组，其中包含具有 shopping-item 类的 span 元素中的所有文本。我这样做的尝试导致数组包含 [Object object] 或 [object HTMLSpanElement]。我只想要 span 元素包含的文本，没有别的。

我试过了 this implementation和 Stack 的其他人。我试过使用 map 方法，目前我尝试使用 toArray 方法来查看数组中存储的内容。下面是我尝试过的一些代码。

<div class="container">
  <h1>Shopping List</h1>

  <form id="js-shopping-list-form">
    <label for="shopping-list-entry">Add an item</label>
    <input type="text" name="shopping-list-entry" id="shopping-list-entry" placeholder="e.g., broccoli">
    <button type="submit">Add item</button>
  </form>

  <ul class="shopping-list">
    <li>
      <span class="shopping-item">apples</span>
      <div class="shopping-item-controls">
        <button class="shopping-item-toggle">
            <span class="button-label">check</span>
          </button>
        <button class="shopping-item-delete">
            <span class="button-label">delete</span>
          </button>
      </div>
    </li>
    <li>
      <span class="shopping-item">oranges</span>
      <div class="shopping-item-controls">
        <button class="shopping-item-toggle">
            <span class="button-label">check</span>
          </button>
        <button class="shopping-item-delete">
            <span class="button-label">delete</span>
          </button>
      </div>
    </li>
    <li>
      <span class="shopping-item shopping-item__checked">milk</span>
      <div class="shopping-item-controls">
        <button class="shopping-item-toggle">
            <span class="button-label">check</span>
          </button>
        <button class="shopping-item-delete">
            <span class="button-label">delete</span>
          </button>
      </div>
    </li>

//Here are some of my attempts for context.

//1ST attempt
const list = $('span.shopping-item').toArray();
for (prop in list) {
  alert(`${prop} = ${list[prop]}`);
}

//another attempt
let data = $('li').children('span.shopping-item').map(function() {
  return {
    item: $(this).text()
  };
}).get();

//another attempt
const list = ('ul.shopping-list').children('span.shopping-item').map(function(item) {
  return item;
});

我期望输出:

['apples', 'oranges', 'milk', 'bread']

当我用 alert() 显示列表时。然而，这就是我得到的 [Object object]、[object HTMLSpanElement] 或有时只是一个充满 [Object object] 的完整列表/p>

Answer 1

你的第二个例子差不多了，你只需要直接返回text()；没有必要将它放在对象的属性中:

let data = $('li').children('span.shopping-item').map(function() {
  return $(this).text();
}).get();
console.log(data);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <h1>Shopping List</h1>

  <form id="js-shopping-list-form">
    <label for="shopping-list-entry">Add an item</label>
    <input type="text" name="shopping-list-entry" id="shopping-list-entry" placeholder="e.g., broccoli">
    <button type="submit">Add item</button>
  </form>

  <ul class="shopping-list">
    <li>
      <span class="shopping-item">apples</span>
      <div class="shopping-item-controls">
        <button class="shopping-item-toggle">
            <span class="button-label">check</span>
          </button>
        <button class="shopping-item-delete">
            <span class="button-label">delete</span>
          </button>
      </div>
    </li>
    <li>
      <span class="shopping-item">oranges</span>
      <div class="shopping-item-controls">
        <button class="shopping-item-toggle">
            <span class="button-label">check</span>
          </button>
        <button class="shopping-item-delete">
            <span class="button-label">delete</span>
          </button>
      </div>
    </li>
    <li>
      <span class="shopping-item shopping-item__checked">milk</span>
      <div class="shopping-item-controls">
        <button class="shopping-item-toggle">
            <span class="button-label">check</span>
          </button>
        <button class="shopping-item-delete">
            <span class="button-label">delete</span>
          </button>
      </div>
    </li>
  </ul>
</div>