Question

我有这样的列表项：

<ul id="band-list">
 <li data-band-id = '3' data-order = '1'>Text</li>
 <li data-band-id = '4' data-order = '2'>Text</li>
 <li data-band-id = '1' data-order = '3'>Text</li>
 <li data-band-id = '7' data-order = '4'>Text</li>
</ul>

<a href='#' id='createArray'>Click me</a>

我想要做的是创建一个Javascript（我不能使用jQuery）函数，当我点击链接时将获取所有列表项然后将两个属性值添加到一个多维数组，所以我结束类似的事情：

var bandArr = [[3,1],[4,2],[1,3],[7,4]];

感激不尽的任何帮助。

Answer 1

尝试为该锚标记绑定event listener并使用querySelectorAll选择要抓取的所需元素，迭代它并使用Array.prototype.map构建所需的数组，

document.getElementById("createArray").addEventListener("click", function() {
  var res = Array.from(document.querySelectorAll("ul#band-list > li")).map(function(itm) {
    return [itm.dataset["bandId"], itm.dataset["order"]];
  });
  console.log(res);
}, false);

DEMO

Answer 2

您应该为锚点击事件添加事件侦听器。然后在锚点处理程序中，您将获得li的{{1}}元素。您可以使用ul方法（获取querySelector元素，因为它只返回一个结果）和ul来获取列表中的所有querySelectorAll

事情很简单，在for循环中，您可以通过在每个li元素上使用getAttribute方法来获取属性。您在多维数组中推送每对属性。在下面的示例中，我为li数组中的每个属性对推送一个新数组。我已将属性值解析为整数，因为multiDimensionalArray方法返回字符串结果（从您的描述中我假设您希望每对的整数值）。

示例代码：

getAttribute

以下是运行上述代码的plunk。

使用Javascript从提交的多个列表项中收集多个属性值

2 个答案:

DEMO