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

Question

I have a simple html and jquery script like below, I am trying to get a comma seperated list of data-item-id so would look like...

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> 

I have grabbed the items but how can I convert this into the comma seperated string?

Answer 1

Map each item to its item-id , then join by commas:

 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> 

But there's no need for a big library like jQuery to accomplish something this trivial, if you want:

 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> 

Answer 2

Another alternative with JQuery could be using .each() to traverse the items while grabbing the data-item-id with .data() and adding it to a string.

 $(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> 

Answer 3

Because who wouldn't want to add destructuring as well ..... (Kudos to CertainPerformance)

 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> 

Answer 4

You can also apply some features of ES5 and ES6 for a shorter solution. And without 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>