0

The following code:

<div id='idiv' name='ndiv'>
<script>
    var attrs = $('#idiv').attr({})
    var astr = JSON.stringify(attrs)
    console.log (astr)
</script>

produces in the console:

{"0":{},"length":1,"context":{"location":{}},"selector":"#idiv"}

Why isn't the result:

{"id":"idiv","name":"ndiv"}

How do I get the latter?

tgoneil
  • 1,522
  • 3
  • 19
  • 30
  • Just as a comment, try to use semicolons at the end of each statement – Pablo Matias Gomez Aug 27 '14 at 18:08
  • I was using semicolons religiously until I found out they are entirely optional in javascript. Now I happily never use them, since I don't have to. – tgoneil Aug 27 '14 at 18:20
  • They are not always optional, in certain cases they are not optional. So it is a good practice to always use them. You should check this answer: http://stackoverflow.com/a/1169596/3645944 – Pablo Matias Gomez Aug 27 '14 at 18:24
  • Thanks for pointing that out. That's subtle, but certainly motivates a semicolon in that case. I'll remember it if I write any code with functions that way. – tgoneil Aug 27 '14 at 18:36

3 Answers3

2

Try this:

<div id='idiv' name='ndiv'>
<script>
    var attrMap = $('#idiv')[0].attributes;
    var attrs = {};
    $.each(attrMap, function(i,e) { attrs[e.nodeName] = e.value; });
    console.log(attrs); // Object {id: "idiv", name: "ndiv"} 
    console.log(JSON.stringify(attrs)) //  {"id":"idiv","name":"ndiv"} 
</script>

Fiddle: http://jsfiddle.net/xbuhbqux/

Pablo Matias Gomez
  • 6,614
  • 7
  • 38
  • 72
  • That works, so thank you Pablo. I'm surprised it has to be so complicated. Is that the typical way to extract an html element's attributes using jquery? Is there a simpler way? – tgoneil Aug 27 '14 at 18:16
  • @tgoneil Those are 3 lines, I don't think it is so complicated. But I think that there's no reason to get all the attributes of an element, why would you want that? – Pablo Matias Gomez Aug 27 '14 at 18:18
  • No offense, but here we go again, with the "I can't imagine why you would want to do that" kind of question. I see this routinely. It presumes the one asking the question is wise enough to appreciate all the valid reasons why one would have a need for a particular programming technique. To answer you question, I'm taking great advantage of jquery's ability to manipulate the DOM. I start with zero static html and go from there. It would be possible, but extremely tedious to keep track of the attributes added with separate data structures. Hence needing jquery to report back. – tgoneil Aug 27 '14 at 18:27
  • If you're scratching your head wondering about the advantage for a particular application for jquery to take care of all the DOM manipulation instead of starting with static html, then here we go again ... :-) – tgoneil Aug 27 '14 at 18:29
  • @tgoneil I really can't understand what you are trying to do, but of course, I you really need this, then use the code I posted, I just asked because maybe I could help you to think other way of approaching what you are trying to do (Yeah, I know, i wrote `what you are trying to do` like a hundred times, sorry for that) – Pablo Matias Gomez Aug 27 '14 at 18:31
  • I don't want to take away from the point that I totally appreciate you writing that solution for me. It works perfectly! Saved me from continuing to knock my head against the wall. :) Thanks again. – tgoneil Aug 27 '14 at 18:39
0

jQuery operators are often chainable and usually return arrays of elements, rather than individual elements.

What you are doings is actually returning a list of matching elements, and asking for attributes for all items in that list, which is also returning a list elements. The JSON.stringify reflects that.

Jon Anderson
  • 696
  • 4
  • 9
0

If you want to create an object of all the attributes of an element, refer to this SO answer

to produce the object you have shown:

var idiv = $('#idiv');
var attrs = JSON.stringify({
    "id": idiv.attr("id"),
    "name": idiv.attr("name")
});
console.log(attrs);
Community
  • 1
  • 1
ron tornambe
  • 10,452
  • 7
  • 33
  • 60
  • I realize if I explicitly invoke attr() with attr('id'), etc, I can get the attributes. That presumes I know the attribute property names ahead of time, which I don't. – tgoneil Aug 27 '14 at 18:19
  • Or at least have handy access. More details are in one of my replies to the answer. – tgoneil Aug 27 '14 at 18:32