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

Get attribute of all list items and add them to input

本文关键字：添加 输入 列表 属性 获取      更新时间：2023-09-26

我有一个这样的列表：

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

我知道如何获取单独的列表项，但无法理解如何获取所有列表项并将其插入其中。

给你，一个纯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;

演示

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

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(":"));
});

演示

尝试

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

如果可以使用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;
相关文章：