prop() doesn't work with some attributes

Question

I have the following elements on my html page:

<ul class="form-tabs">
    <li class="active" data-bind="blah-blah-blah-1">
    <li class="" data-bind="blah-blah-blah-2">
</ul>

I need to iterate over data-bind properties, so I did the following:

$("ul.form-tabs > li").prop('data-bind', function (index, element) {
  console.log(element);
});

There are two undefined in log. JQuery API says: It returns undefined for the value of a property that has not been set, or if the matched set has no elements. But, wait a minute, my <li> has data-bind property! Also, when i try to use .prop('class'), it works perfect giving me "active" and "".

I said OK and wrote this:

$("ul.form-tabs > li").each(function (index, element) {
  console.log(element.prop('data-bind'));
});

Now i have this error: TypeError: element.prop is not a function.

So, the question is: what am i doing wrong?

P.S. I use jquery 1.10.1 and knockout. Could this be a conflict?

P.P.S. Thanks to everyone, this code works perfect:

$("ul.form-tabs > li").each(function (index, element) {
  console.log($(element).attr('data-bind'));
});

Answer 1

There's a difference between "properties" and "attributes". A "property" is something available directly on the DOM node; things like "id", "name", "tagName", etc are properties.

Attributes that the HTML parser doesn't recognize as standard attributes for a particular tag are not available as properties on the DOM node. Instead, they have to be accessed via .setAttribute() and .getAttribute(). In jQuery terms, that means using .attr() instead of .prop().

The "family" of data-* attributes are a little special, because the jQuery .data() mechanism will implicitly fetch values from those when the corresponding data key is requested. It will not, however, update the attribute values via setAttribute(). Whether you need that or not is up to the way your code works. When the attributes involved are intended to be interpreted by another library, then how such updates need to work depends on that library; it may not be possible to approach the problem this way at all, since the other library may not pay attention to the DOM attribute value after it's initially dealt with the element.

Anyway, when using .data() to access data-* attributes, jQuery expects the keys to look like the portion of the attribute name following the data- prefix. For (I guess) convenience, jQuery will treat camel-case versions of data keys as equivalent to dash-separated versions. That is, if the HTML element looks like

<div id=x data-some-thing=whatever>

then from jQuery you can fetch the value in either of these ways:

var withDashes = $("#x").data("some-thing");
var camelCase = $("#x").data("someThing");

Another thing to note: sometimes, fetching the value of a DOM node property as the property value instead of the attribute value gets you different results. One important example is the href attribute of <a> elements or the action attribute of a <form> tag. The property values will (in most browsers, anyway; maybe all) be "normalized" to reflect the actual URL that would be used should the tag be activated. The attribute value, on the other hand, will remain what was originally parsed from the HTML source. That can be important when you've got client-side code imposing its own interpretation on those sorts of attributes.