Question

我有一个带有数据属性的jquery元素列表。

现在我想获得这些数据属性的列表。

由于data - 属性是某种对象属性，我认为这可能适用于下划线pluck方法。

这甚至可能吗？

见这个简短的例子：

＆＃13;

var divs = $("div");

// now do something

// expected result: [1, 2, 3]

＆＃13;

<script src="https://cdnjs.com/libraries/underscore.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div data-foo="1">a</div>
<div data-foo="2">b</div>
<div data-foo="3">c</div>
<div>x</div>

＆＃13;

解决方案

基于@ romeo-sierra这是我写下来的方式（因为我已经有了jquery对象）。下划线是多余的

＆＃13;

var foos = $("div").map(function() {
  return $(this).data("foo");
}).toArray();

console.log(foos);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div data-foo="1">a</div>
<div data-foo="2">b</div>
<div data-foo="3">c</div>
<div>x</div>

＆＃13;

Answer 1

Vanilla JS可以很好地完成这项工作，不需要jQuery或任何其他库：

const foos = [...document.querySelectorAll('[data-foo]')]
  .map(elm => elm.dataset.foo);
console.log(foos);

<div data-foo="1">a</div>
<div data-foo="2">b</div>
<div data-foo="3">c</div>
<div>x</div>

ES5版本：

var foos = Array.prototype.map.call(document.querySelectorAll('[data-foo]'), function(elm) {
  return elm.dataset.foo;
});
console.log(foos);

<div data-foo="1">a</div>
<div data-foo="2">b</div>
<div data-foo="3">c</div>
<div>x</div>

Answer 2

如何使用纯jQuery？（因为你已经在使用它了）

var arr = [];
$('div[data-foo]').each(function(){
    arr.push($(this).data("foo")); // should return the value
});
console.log(arr);

检查this fiddle。

Answer 3

肯定必须查找特定的数据属性。

您不能只为整个页面排出元素数据属性，并获得完整的列表。

但如果你知道你在找什么...... 见下文

＆＃13;

var attribute = "foormidable";

$("*").each(function(){
  var match = $(this).attr("data-"+attribute);
  if(typeof(match)!="undefined"){
    console.log(match);
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div data-foorm="1">a</div>
<div data-foormidable="2">b</div>
<div data-foolahlayouuu="3">c</div>
<div>x</div>

＆＃13;

使用.data()

或

＆＃13;

var attribute = "foormidable";

$("*").each(function(){
  var match = $(this).data(attribute);
  if(typeof(match)!="undefined"){
    console.log(match);
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div data-foorm="1">a</div>
<div data-foormidable="2">b</div>
<div data-foolahlayouuu="3">c</div>
<div>x</div>

＆＃13;

最后一个将获得THE OBJECT的价值......通过JS代码使其成为动态。
这与on load标记属性值完全不同 ;）

结合$和_来获取数据值？

3 个答案: