Получение значений атрибута из всех элементов в jQuery

Question

Предположим, у нас есть следующее HTML:

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

Имеется ли в jQuery встроенный механизм для получения всех значений указанного атрибута c? А если нет, то каков наиболее эффективный способ их получения?

Например, что-то похожее на: $('entry').attrs('id'), возвращая список значений для всех элементов, который возвращает что-то похожее на ["1", "2", "3", "4"]?

jQuery документация в разделе Общие атрибуты (где находится attr) не дает никаких намеков на то, что такое существует, и я ничего не нашел в StackOverflow или других другой форум поддержки, задающий этот вопрос.

Answer 1

Для этого нет прямой функции. Однако это легко сделать с помощью .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 2

Вы можете использовать что-то вроде этого: 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 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, используя jQuery.fn.extend(), и добавить настраиваемый метод, который выполняет итерацию по всем совпадающим элементам, извлекая один или несколько атрибутов из всех из них и помещает / объединяет их в возвращаемый массив / object, соответственно.

Поскольку реализация ванильная 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>