Question

我有一个这样的清单：

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

使用javascript，如何获取所有列表项属性data-bullet并将它们插入输入值（以逗号分隔）：

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

所以最终结果将是：

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

我知道如何获取单个列表项但无法理解如何将它们全部解压缩并将其插入其中。

Answer 1

在这里，一个纯粹的JavaScript解决方案

尝试在此背景下使用dataset，

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

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

DEMO

或者不那么复杂且可读的版本，

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

根据您的新要求，您可以通过

完成任务

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

试

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

Answer 3

如果您可以使用querySelectorAll查找元素，然后使用getAttribute方法对其进行映射。例如（ES6语法）：

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

ES5类比：

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;

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

3 个答案:

DEMO

DEMO