从jQuery中的所有元素中获取属性值

Question

假设我们有以下 HTML：

<entries>
  <entry id="1" />
  <entry id="2" />
  <entry id="3" />
  <entry id="4" />
</entries>

jQuery 是否具有用于检索特定属性的所有值的内置机制？如果没有，那么检索它们的最有效方法是什么？

例如，类似于：$('entry').attrs('id')，返回所有元素的值列表，返回类似于["1", "2", "3", "4"]？

General Attributes 下的 jQuery 文档（这是找到 attr 的位置）没有给出任何提示存在这样的事情，而且我在 StackOverflow 或任何其他支持论坛上都没有找到任何询问这个问题的信息。

Answer 1

你可以使用类似的东西：https://jsfiddle.net/g903dyp6/

<entries>
  <entry id="1" />
  <entry id="2" />
  <entry id="3" />
  <entry id="4" />
</entries>

let arr = $.map($('entry'), function(el) {
     return $(el).attr('id');
});

Answer 2

没有直接的功能可以做到这一点。但是，使用.map() 可以轻松完成。例如，

let ids = $('entry').map(function() {
    return this.getAttribute('id');
}).get();

let ids = $('entry').map(function() {
    return this.getAttribute('id');
}).get();

console.log(ids);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<entries>
  <entry id="1" />
  <entry id="2" />
  <entry id="3" />
  <entry id="4" />
</entries>

Answer 3

这是使用 JavaScript Array .map() 函数的一种方式：

let ids = jQuery.makeArray($('entry')).map(entry => entry.id);

console.log('ids:', ids);

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<entries>
  <entry id="1" />
  <entry id="2" />
  <entry id="3" />
  <entry id="4" />
</entries>

Answer 4

您可以使用 jQuery.fn.extend() 扩展 jQuery 并添加一个自定义方法，该方法迭代所有匹配的元素，从所有元素中提取单个或多个属性，并将它们分别推送/合并到返回的数组/对象中。

由于实现是 vanilla JS，这将比在所有中间步骤中使用 jQuery 对象和函数更快，但可能需要根据您需要支持的浏览器进行一些调整：

jQuery.fn.extend({
  attrs: function(attributeName) {
    if (attributeName) {
        return this.toArray().map((el) => el.getAttribute(attributeName));
    }
    
    return this.toArray().reduce((merged, el) => {
      const { attributes } = el;
      const totalAttributes = attributes.length;

      for (let i = 0; i < totalAttributes; ++i) {  
        const attribute = attributes[i].nodeName;

        if (merged[attribute]) {
          merged[attribute].push(el.getAttribute(attribute));
        } else {
          merged[attribute] = [el.getAttribute(attribute)];
        }
      }

      return merged;
    }, {});
  },
});

console.log($('entry').attrs());
console.log($('entry').attrs('id'));
console.log($('entry').attrs('class'));

.as-console-wrapper {
  max-height: 100% !important;
}

<entries>
  <entry id="1" class="foo" />
  <entry id="2" class="bar" />
  <entry id="3" class="baz" />
  <entry id="4" class="qux" />
</entries>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>