如何从jQuery对象中的元素获取属性值数组

Question

我在自己的类中使用元素中的自定义属性。我正在尝试为类的所有元素返回自定义属性的值。

我使用jQuery按类查找元素，jQuery将对象放在数组中。

var tabs = $('li.tab_item');

既然我有数组中的对象，我想为所有数组成员返回自定义属性的值。

如何做到这一点？

Answer 1

var tab_attribs = $('li.tab_item').map(function () {
  return $(this).attr("custom_attribute");
});

这将为您提供一组自定义属性值。当然，你可以更传统地做到这一点：

var tab_attribs = [];
$('li.tab_item').each(function () {
  tab_attribs.push( $(this).attr("custom_attribute") );
});

无论如何，您应该使用HTML5提供的data-*属性：

<li class="tab_item" data-foo="some custom data">

和（见jQuery data()）：

$('li.tab_item').data("foo"); // -> "some custom data"

Answer 2

使用.map()：

 $("li.tab_item").map(function (){
    return this.getAttribute("myAttribute");
 });

它为您提供了一个包装在jQuery对象中的值数组。如果您想获取数组，请拨打.get()，即.map(...).get()。

顺便说一下，您还可以按属性而不是类选择元素：

$("[myAttribute]")

这将返回页面上具有myAttribute属性的所有元素。

Answer 3

简单解决方案（ES6）

Array.from(document.getElementsByClassName('tab_item')).map(item => item.getAttribute('foo'));

<强> Online demo (jsFiddle)