Is "loop" a special keyword within span?
loop is an attribute used in html5 media tags that expects a boolean true or false value. I expect this is why the above isn't working.
There is no loop
attribute in span
elements: global attributes only.
However, there is a loop
attribute in audio
and video
elements.
For custom attributes, you should use data
attributes as defined in HTML5.
If you name your attribute data-loop
, you can natively access it through element.dataset.loop
.
According to specs, loop
is a boolean attribute, which means you must specify it in one of the following ways**:
<span loop>
<span loop="">
<span loop="loop">
Any other value such as loop="false"
or loop="0"
or loop='{"operator":"maxis"}'
just imply that the loop attribute is present and the audio/video would loop.
Now, for boolean attributes jQuery.attr
simply returns the attribute name. This behavior is documented and it is not a bug:
Concerning boolean attributes, consider a DOM element defined by the HTML markup
<input type="checkbox" checked="checked" />
, and assume it is in a JavaScript variable namedelem
:
$( elem ).attr( "checked" )
(1.6.1+) (returns)"checked"
(String) Will change with checkbox state
Having explained that, the correct solution is to use the HTML5 data attributes. jQuery parses data attributes on page load so you can do this:
$(function() {
var $span = $("span[data-loop]").first();
console.log($span.data("loop")); // Object {operator: "maxis"}
console.log($span.data("loop").operator); // maxis
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span data-loop='{"operator":"maxis"}'>world</span>
** Note that this attribute is invalid on span
elements.