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

Question

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

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

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

现在我有一个对象数组，我想返回所有数组成员的自定义属性的值。

应该如何实现？

- garyM

---

你的最佳朋友：jquery-docs。 - Christoph

Answer 1

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

这将为您提供自定义属性值的数组。当然，您也可以更传统地完成这个操作：

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"

- Tomalak

---

谢谢...两个都可以用$('li.tab_item').data("foo"); // 只返回一个条目 - garyM

@garyM 当然可以。你应该在循环中使用它，比如 map() 或者 each()。 - Tomalak

啊...我以为它的工作方式类似于$('li.tab_item')..返回一个数组。在jQuery文档中，它提到了".attr()"的这个事实。再次感谢... - garyM

@garyM jQuery中返回值的所有内容都会打破链式结构。这适用于获取.text()、.html()、.attr('xyz')等内容。但是，如果一个方法不返回立即值，例如设置.attr('xyz'，'new value')，它将返回先前匹配的元素，即一个数组。 - Tomalak

只需添加，tab_attribs.toArray()。 - Hatim

@Hatim 是正确的，如果没有使用 toArray() 方法，你会得到一个 jQuery 集合而不是一个数组！ - Dave de Jong

Answer 2

使用 .map()：

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

这将为您提供一个包装在jQuery对象中的值数组。如果要获取数组，请调用.get()，即.map(...).get()。

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

$("[myAttribute]")

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

- gilly3

Answer 3

简单的解决方案（ES6）

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

在线演示 (jsFiddle)

- Ali Soltani