javascript - jQuery 将元素 id 转换为逗号分隔的字符串

Question

我有一个简单的 html 和 jquery 脚本，如下所示，我正在尝试获取一个逗号分隔的数据项 id 列表，所以看起来像......

1,2,3,4,5

var items = $('.container').children();
console.log(items);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
  <div class="item" data-item-id="1">Item 1</div>
  <div class="item" data-item-id="2">Item 2</div>
  <div class="item" data-item-id="3">Item 3</div>
  <div class="item" data-item-id="4">Item 4</div>
  <div class="item" data-item-id="5">Item 5</div>
</div>

我已经抓住了这些项目，但是如何将其转换为逗号分隔的字符串？

标签： javascriptjquery

Answer 1

将每个项目映射到它的item-id，然后用逗号加入：

var items = $('.container')
  .children()
  .map(function() { return $(this).data('item-id') })
  .get()
  .join(',');
console.log(items);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
  <div class="item" data-item-id="1">Item 1</div>
  <div class="item" data-item-id="2">Item 2</div>
  <div class="item" data-item-id="3">Item 3</div>
  <div class="item" data-item-id="4">Item 4</div>
  <div class="item" data-item-id="5">Item 5</div>
</div>

但是，如果您愿意，不需要像 jQuery 这样的大型库来完成这么简单的事情：

const items = Array.from(
  document.querySelectorAll('.container > .item'),
  div => div.dataset.itemId
)
  .join(',');
console.log(items);

<div class="container">
  <div class="item" data-item-id="1">Item 1</div>
  <div class="item" data-item-id="2">Item 2</div>
  <div class="item" data-item-id="3">Item 3</div>
  <div class="item" data-item-id="4">Item 4</div>
  <div class="item" data-item-id="5">Item 5</div>
</div>