Grab values of an attribute from all elements in jQuery

Question

Suppose we have the following HTML:

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

Does jQuery have a built-in mechanism for retrieving all values of a specific attribute? And if not, then what is the most efficient way to retrieve them?

Eg, something similar to: $('entry').attrs('id'), returning a list of values across all elements which returns something similar to ["1", "2", "3", "4"]?

jQuery documentation under General Attributes (which is where attr is found,) doesn't give any hint to such a thing existing, and I've found nothing on StackOverflow or any other support forum asking this question.

As far as I know, there is no something like this in jquery, you can use api.jquery.com/attribute-equals-selector $("input[placeholder]").each( function () { console.log($(this)); }); — cvekaso
– cvekaso, Commented May 8, 2020 at 20:11
There is a solution from another post: stackoverflow.com/a/5327980/4173464 — db1975
– db1975, Commented May 8, 2020 at 20:13
.each is gross - use .map stackoverflow.com/a/5327994/1555990 — That1Guy
– That1Guy, Commented May 8, 2020 at 20:13

Xth · Accepted Answer · 2020-05-08 20:13:48Z

2

You can use something like that: 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');
});

answered May 8, 2020 at 20:13

Xth

8201 gold badge6 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ohmu · Accepted Answer · 2020-05-12 14:35:52Z

2

There is not a direct function to do that. However, it can be easily accomplished using .map(). E.g.,

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>

edited May 12, 2020 at 14:35

answered May 8, 2020 at 20:15

ohmu

19.8k44 gold badges114 silver badges151 bronze badges

3 Comments

That1Guy Over a year ago

How well does this scale? Say you have 5,000-10,000 entry tags - what does the performance look like in a situation like that? Is there a better solution in that case?

ohmu Over a year ago

@That1Guy I'm not certain. Jsperf is giving trouble.

Joshua Burns Over a year ago

FYI rather than wrapping the element in a jQuery object to get the attribute's value (eg $(this).attr('id'), you can simply do this.getAttribute('id')

terrymorse · Accepted Answer · 2020-05-08 20:35:34Z

1

Here's one way that uses the JavaScript Array .map() function:

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>

edited May 8, 2020 at 20:35

answered May 8, 2020 at 20:28

terrymorse

7,1661 gold badge23 silver badges31 bronze badges

Comments

Danziger · Accepted Answer · 2020-05-08 20:58:00Z

You can extend jQuery using jQuery.fn.extend() and add a custom method that iterates over all matching elements, extracting a single or multiple attributes from all of them and pushes/merges them into the returned array/object, respectively.

As the implementation is vanilla JS, this will be faster than working with jQuery objects and functions in all intermediate steps, but might need some tuning depending on which browsers you need to support:

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>

@That1Guy This is probably faster, more flexible and scales better than a solution using jQuery in all intermediate steps.

Collectives™ on Stack Overflow

Grab values of an attribute from all elements in jQuery

4 Answers 4

Comments

3 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related