Question

如何选择所有数据属性并返回数组

<ul data-cars="ford">
 <li data-model="mustang"></li>
 <li data-color="blue"></li>
 <li data-doors="5"></li>
</ul>

数组应返回模型，颜色和门。

Answer 1

可以使用data-[name]

直接通过DOM访问元素的element.dataset属性

＆＃13;

var allData = [];
//var matches = document.querySelectorAll("li,ul"); < will return ul and il data attributes
var matches = document.querySelectorAll("li");
for (var i = 0; i < matches.length; i++) {
  allData.push(matches[i].dataset)
}
console.log(allData);

＆＃13;

<ul data-cars="ford">
  <li data-model="mustang"></li>
  <li data-color="blue"></li>
  <li data-doors="5"></li>
</ul>

＆＃13;

你也可以使用JQuery，如下所示

＆＃13;

$(document).ready(function() {

  var allData = [];

  $('li').each(function() {
    allData.push($(this).data());
    console.log(allData);
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul data-cars="ford">
  <li data-model="mustang"></li>
  <li data-color="blue"></li>
  <li data-doors="5"></li>
</ul>

＆＃13;

Answer 2

您可以使用 getAttribute 方法从任何dom元素获取属性。 MDN

以下代码将为您提供数组所需的内容

Array.from(document.querySelectorAll('li')).map((el) => el.getAttribute('data-model') || el.getAttribute('data-color') || el.getAttribute('data-doors'))

javascript选择所有数据属性

2 个答案: