From a list of html elements with a common attribute to an array of their values?

Question

Given HTML such

<span class="L5" letters="a"></span>
<span class="L5" letters="b"></span>
<span class="L5" letters="c"></span>
<span class="L5" letters="d"></span>
<span class="L5" letters="e"></span>

How to return an array : var list = [ 'a','b','c','d','e' ];

I tried $(".L5").attr("letters"); without success (jsfiddle).

Ryan Wilson · Accepted Answer · 2018-02-05 20:05:40Z

2

You need to get the array of elements with that class type then push their attribute letters value into a new array.

let list= [];
let spanElements = $('.L5');

for(let x =0; x < spanElements.length; x++){
    list.push($(spanElements[x]).attr('letters'));
}

answered Feb 5, 2018 at 20:05

Ryan Wilson

10.9k3 gold badges23 silver badges46 bronze badges

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

Comments

Joe · Accepted Answer · 2018-02-05 20:40:44Z

1

Ryan's answer will definitely do the job with jQuery. However, and I'm not sure how many elements you are going to be parsing in this way, if performance matters you can accomplish the same thing without jQuery by using Array.from() and map()

var list = Array.from(document.getElementsByClassName('L5')).map(function (element) {
    return element.attributes.letters.nodeValue
});

Fiddle with console.time()

answered Feb 5, 2018 at 20:40

Joe

364 bronze badges

Comments

Yosvel Quintero · Accepted Answer · 2018-05-16 14:00:57Z

1

You could use jQuery.map() combined with jQuery.attr()

Code:

const list = $('.L5').map((index, elem) => $(elem).attr('letters')).get();

console.log(list);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="L5" letters="a"></span>
<span class="L5" letters="b"></span>
<span class="L5" letters="c"></span>
<span class="L5" letters="d"></span>
<span class="L5" letters="e"></span>

answered May 16, 2018 at 14:00

Yosvel Quintero

19.1k5 gold badges39 silver badges47 bronze badges

Collectives™ on Stack Overflow

From a list of html elements with a common attribute to an array of their values?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related