Get all attributes of element is working different on IE

Question

If you run this script http://jsfiddle.net/y8jp8/2/ on IE7 and firefox you can see: Results are not the same.

I just want to see just 3 attribute (id, title and myattr) and it's values. How can I do this in IE?

Answer 1

This is a correction to roXon's answer, but still no perfect solution..

var result = "";
var attrs = $("#sample")[0].attributes;

for(var i=0;i<attrs.length;i++) {
    if(attrs[i].nodeValue != null 
    && attrs[i].nodeValue != '' 
    && attrs[i].nodeValue != 'inherit'){
        result += ( attrs[i].nodeName + "=" + attrs[i].nodeValue + "<br>");
    }

    $('#log').html(result);
}

http://jsfiddle.net/digitaloutback/pMVJw/9/

UPDATE:

IE7 doesn't seem to filter out the unspecified attributes, for example, this is the data for the 'sample' attribute in your example:

parentNode => null 
nodeValue => sample 
firstChild => null 
name => id 
expando => false 
lastChild => null 
ownerDocument => [object] 
attributes => null 
previousSibling => null 
value => sample 
nodeType => 2 
nodeName => id 
childNodes => null 
nextSibling => null 
specified => true 
ownerElement => undefined 

Therefore, you need to test against 'specified' like:

var result = "";
var attrs = $("#sample")[0].attributes;

for(var i=0;i<attrs.length;i++) {   

    if(attrs[i].specified === true ) {
        result += ( attrs[i].nodeName + "=" + attrs[i].nodeValue + "<br>");
    }

    $('#log').html(result);

}

http://jsfiddle.net/digitaloutback/pMVJw/10/

Answer 2

Any reason you can't just get the three explicit values you want instead of iterating over all attributes? This gets me the same results in IE7 and Chrome.

http://jsfiddle.net/y8jp8/22/

var result = "";
result += 'id=' + $('#sample').attr('id') + '<br />';
result += 'title=' + $('#sample').attr('title') + '<br />';
result += 'myattr=' + $('#sample').attr('myattr') + '<br />';
$("#log").html( result );