jQuery将元素ID转换为逗号分隔的字符串

时间:2019-05-28 04:01:06

标签: javascript jquery

我有一个简单的html和jquery脚本,如下所示,我试图获取以逗号分隔的data-item-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>

我已经抓取了物品,但是如何将其转换为逗号分隔的字符串?

4 个答案:

答案 0 :(得分:4)

将每个项目映射到其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>

答案 1 :(得分:1)

使用JQuery的另一种选择是使用.each()遍历items,同时用.data()抓取data-item-id并将其添加到字符串中。

$(document).ready(function()
{
    var itemList = "";

    $('.container .item').each(function()
    {
        itemList += $(this).data('item-id') + ",";
    });

    console.log("Ids:", itemList.slice(0,-1));
});
.as-console {background-color:black !important; color:lime;}
<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>

答案 2 :(得分:1)

因为谁也不想添加解构.....(对SomePerformance表示敬意)

const items = Array.from(
  document.querySelectorAll('.container > .item'),
  ({ dataset: { itemId: i } }) => i
)
  .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>

答案 3 :(得分:1)

您也可以应用ES5和ES6的某些功能来缩短解决方案。而且没有 jQuery

let itemsIds = [...document.getElementsByClassName("item")]
    .map(elem => elem.getAttribute("data-item-id"))
    .join(',');
console.log(itemsIds);
<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>