获取所有列表项的属性并将其添加到输入中

Question

I have a list like this:

<ul class="draggable">
    <li data-bullet="1"> item 1</li>
    <li data-bullet="2"> item 2</li>
    <li data-bullet="3"> item 3</li>
</ul>

Using javascript, how do I grab all the list item attributes data-bullet and insert them into the value of an input (separated by a comma):

<input id="insertme" type="hidden" name="bullet" value="">

So the end result will be:

<input id="insertme" type="hidden" name="bullet" value="1,2,3">

I know how to get individual list items but can't get my head around how to get them all and insert them there.

Answer 1

Here you go, A pure javascript solution

Try to use dataset at this context,

var res = "";
[].forEach.bind(document.querySelectorAll(
   '.draggable > li[data-bullet]'),function(itm, i){
  res += ((i) ? ":" : "") + itm.dataset.bullet;
})();

document.getElementById("insertme").value = res;

DEMO

Or the less complex and a readable version would be,

var elemArray = Array.from(document.querySelectorAll('.draggable > li[data-bullet]')),
    res ="";
elemArray.forEach(function(){
 res += ((i) ? ":" : "") + itm.dataset.bullet;
});
document.getElementById("insertme").value = res;

---

As per your new requirement, you can accomplish your task by,

$("button").click(function() {
  var parent = $(this).parent(); 
  parent.closest(".draggable").next(":text").val(parent.siblings("li").addBack().map(function(){
    return $(this).data("bullet")
  }).get().join(":"));
});

DEMO

Answer 2

try

var allBullets = [];
$(".draggable li").each(function(){
 allBullets.push($(this).attr("data-bullet"));
});
$("#insertme").val(allBullets.join(","));

Answer 3

If you can use querySelectorAll to find elements and then map it using getAttribute method. For example (ES6 syntax):

const items = document.querySelectorAll('.draggable li');
const result = [...items].map(el => el.getAttribute('data-bullet')).join();
document.getElementById('insertme').value = result;

ES5 analogy:

var items = document.querySelectorAll('.draggable li');
var result = [].slice.call(items).map(function(el) {
    return el.getAttribute('data-bullet');
}).join();
document.getElementById('insertme').value = result;