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 named elem:

$( 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.}