jQuery .attr() with callback behavior

Question

Was going through jQuery documentation and found something I don't quite understand, yet ) Let's say on the page I have a list like this:

<ul id='list0'>
    <li>list item 1<b></b></li>
    <li>list item 2<b></b></li>
    <li>list item 3<b></b></li>
    <li>list item 4<b></b></li>
</ul>

When I run this code

$('#list0 li').attr('id', function(i) {
    return (i + 1) % 2 ? 'odd' : 'even';
}).each(function() {
    $('b', this).text(' -> ' + this.id);
});

I get output of

• list item 1 -> odd
• list item 2 -> even
• list item 3 -> odd
• list item 4 -> even

Everything works as expected and each <li> inside of <ul> gets an id of odd or even. When I use each() to set content inside <b> I can get an id of <li> using this.id.

Question is, why doesn't this work when I use a different <li> attribute rather than id?

$('#list0 li').attr('foo', function(i) {
    return (i + 1) % 2 ? 'odd' : 'even';
}).each(function() {
    $('b', this).text(' -> ' + this.foo);
}); 

Results in

• list item 1 -> undefined
• list item 2 -> undefined
• list item 3 -> undefined
• list item 4 -> undefined

Even when foo attribute of each <li> still sets to even or odd somehow this time I can't get foo inside of each() with this.foo.

I use jQuery 1.10.2.

Thank you.

Answer 1

Two things to notice here:

First of all ids are unique, in practice you should only have one element with a given id at most. So your first code example is something you shouldn't do.

Elements do not have afoo property, and you need to access it using this.getAttribute("foo") or $(this).attr("foo").

So:

('#list0 li').attr('foo', function(i) {
    return (i + 1) % 2 ? 'odd' : 'even';
}).each(function() {
    $('b', this).text(' -> ' + this.getAttribute('foo'));
}); 

On a side note - you should probably not have sequential list IDs like list0, list1 and so on since they prove problematic. You should also consider storing arbitrary data in JavaScript objects and not on the DOM if you were doing that.