Get All Attributes of an Element Using Jquery

Get all attributes of an element using jQuery

The attributes property contains them all:

$(this).each(function() {
  $.each(this.attributes, function() {
    // this.attributes is not a plain object, but an array
    // of attribute nodes, which contain both the name and value
    if(this.specified) {
      console.log(this.name, this.value);
    }
  });
});

---

What you can also do is extending .attr so that you can call it like .attr() to get a plain object of all attributes:

(function(old) {
  $.fn.attr = function() {
    if(arguments.length === 0) {
      if(this.length === 0) {
        return null;
      }

      var obj = {};
      $.each(this[0].attributes, function() {
        if(this.specified) {
          obj[this.name] = this.value;
        }
      });
      return obj;
    }

    return old.apply(this, arguments);
  };
})($.fn.attr);

Usage:

var $div = $("<div data-a='1' id='b'>");
$div.attr();  // { "data-a": "1", "id": "b" }

Find all elements with a certain attribute value in jquery

$('div[imageId="imageN"]').each(function() {
    // `this` is the div
});

To check for the sole existence of the attribute, no matter which value, you could use ths selector instead: $('div[imageId]')

Can i get all attributes that begin with on using jquery?

You can get all attributes attached to an element with element.attributes.

The native attributes object can be converted to an array and then filtered based on the given string.

A plugin that does the above would look like

$.fn.attrThatBeginWith = function(begins){
    return [].slice.call(this.get(0).attributes).filter(function(attr) {
        return attr && attr.name && attr.name.indexOf(begins) === 0
    });
};

FIDDLE

jquery get all form elements attributes and values

First, in your case probably form is single element selector and you should iterate form elements only not form selector, try this code

$(function(){ $(':input','form').each(function(i, o){    $('#op').append($(o).attr('custom') + ' value:' + $(o).val()+'<br/>'); })});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><form name="UserForm">   <input type="text" name="name1" readonly class="form-control" custom="input"/>   <select  name="iType" id="iType" custom="SelectList">      <option value="3" selected>school</option>   </select>   <select multiple id="multi" id="multi" custom="multiselect">      <option value="1" selected> 1</option>      <option value="2" selected> 2</option>      <option value="3"> 3</option>   </select>    <input type="checkbox" value="1" custom="checkbox" />    <input type="radio" value="1"  custom ="radio" /></form><div id="op"></div>

Get the attribute value of each element from a jQuery set, into an array

Something like this perhaps?

var ids = [];

$('.myClass').each(function () {
  ids.push($(this).attr('id')); // ids.push(this.id) would work as well.
});

How to get all attributes of DOM element?

A Better Answer

I now recommend this answer by Tim Kindberg to the question Get all Attributes from a HTML element with Javascript/jQuery that uses getAttributeNames() and getAttribute(name), which MDN says "is a memory-efficient and performant alternative to accessing Element.attributes."

---

Use Array.from() or Spread Operator ...

Update: Array.from() and Spread operator ... were added to ECMA-262 6th Edition in June 2015, which now has universal modern browser support.

See MDN › Array.from() & Spread syntax (...)

var elem  = document.getElementById('input'),
    attrs = elem.attributes;

console.log('Array.from(attrs)');
Array.from(attrs).forEach(({ name, value }) => {
    console.log(`    ${name}: ${value}`);
})

console.log('[...attrs]');
[...attrs].forEach(({ name, value }) => {
    console.log(`    ${name}: ${value}`);
})

<input type='button' onClick="Start()" id='input' value="Start"/>

---

Related Topics