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

html tags and attributes list with examples
html attributes list
html properties list
html custom attributes
javascript attributes list
css selectors

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).

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++){

Attributes and properties, In HTML, tags may have attributes. When the browser parses the HTML to create DOM objects for tags, it recognizes So, if an attribute is non-standard, there won't be a DOM-property for it. of elem . attributes ) { // (4) list all alert ( ` ${ attr . name } = ${ attr . value } ` ) ; } </ script > </ body >. Content versus IDL attributes. In HTML, most attributes have two faces: the content attribute and the IDL (Interface Definition Language) attribute. The content attribute is the attribute as you set it from the content (the HTML code) and you can set it or get it via element.setAttribute() or element.getAttribute(). The content attribute is always a string even when the expected value should be an integer.

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()

element.querySelectorAll, JS Array · concat() constructor copyWithin() entries() every() fill() filter() find() findIndex() Tip: You can use the length property of the NodeList object to determine the Tip: For a list of all CSS Selectors, look at our CSS Selectors Reference. Return Value: A NodeList object, representing all descendant elements of the  HTML attribute. 1. An HTML attribute is an associated property of an HTML element and used to extend the capability of an HTML element. 2. HTML attributes (usually) have values and are written after a "=" after the name of the attribute. 3. Attribute value pair is placed before the last ">" of an HTML start tag.

You could use combined with jQuery.attr()


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

<script src=""></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>

HTML Attributes, Attributes provide additional information about HTML elements. You will learn more about images in our HTML Images chapter. The HTML5 standard does not require quotes around attribute values. The href Double quotes around attribute values are the most common in HTML, but single quotes can also be used. Hi friends, I have a question. Suppose I have a List<SomeClass> and there is an attribute named "SomeAttribute" in "SomeClass". Now is there any way to get all the "SomeAttribute" values from List<SomeClass> as an array using reflection, collection api or lambda expression?

HTML elements reference, This page lists all the HTML elements, which are created using tags. Common examples of navigation sections are menus, tables of contents, element are to implement a glossary or to display metadata (a list of key-value pairs). <a>, The HTML <a> element (or anchor element), with its href attribute,  Return a list of named Elements with a specific attribute value. { /** * Get an Attribute from an Element. Returns an array of text values of a child element. 52.

Indexed collections, It has a property for determining the array length and other properties for use with element0 , element1 , , elementN is a list of values for the array's elements. You can populate an array by assigning values to its elements. A common operation is to iterate over the values of an array, processing each  Specifies that the specified element/group of elements should be disabled: download <a>, <area> Specifies that the target will be downloaded when a user clicks on the hyperlink: draggable: Global Attributes: Specifies whether an element is draggable or not: dropzone: Global Attributes: Specifies whether the dragged data is copied, moved, or linked, when dropped

.map(), Description: Pass each element in the current matched set through a function, producing a If you wish to process a plain array or object, use the instead. As the return value is a jQuery object, which contains an array, it's very common to call To get a comma-separated list of checkbox ID s: <!doctype html>. I want to print the list elements one by one and perform some actions. But I am unable to get the value present in the list. This is what I am getting in console: [[FirefoxDriver: firefox on MAC (81e15827-9357-0341-9c72-5b26054f780d)] Xpath:-