23

I have the following HTML:

<span loopx='{"operator":"maxis"}'>hello</span>

If I want to retrieve its attribute value {"operator":"maxis"}, I can simply use

$('span[loopx]').each(function(index) {
    var attr = $(this).attr('loopx');
    // attr is the string "{"operator":"maxis"}"
});

However, for the following HTML

<span loop='{"operator":"maxis"}'>world</span>

I get the following result:

$('span[loop]').each(function(index) {
    var attr = $(this).attr('loop');
    // attr is the string "loop"
});

I was wondering, if loop is a special keyword within span?

Here's the test code : http://jsfiddle.net/yccheok/ghggtrfq/4/

2
  • 29
    FYI you shouldn't use non-standard attributes on your elements. If you want to add some custom information, use data-* Jun 10, 2015 at 9:59
  • document.getElementById('output2').innerHTML = document.querySelector('span[loop]').getAttribute('loop'); this work perfectly, so, I think it is jQuery behavior for 'loop' attribute.
    – degr
    Jun 10, 2015 at 10:03

4 Answers 4

37

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.

9
  • So is this technically also a bug in jQuery? Surely it shouldn't normalise attributes for elements that don't have that attribute? Jun 10, 2015 at 10:04
  • 4
    @James, on the other hand, you're not supposed to introduce non-data attributes in elements, so... Jun 10, 2015 at 10:05
  • 1
    @FrédéricHamidi Indeed - hence "technically" :) Jun 10, 2015 at 10:06
  • As I know, jquery use 'sizzle' framework for queries. By the way, I think it's not a feature, it is a bug.
    – degr
    Jun 10, 2015 at 10:06
  • 3
    Looks like they've covered it here - makes mention of possibly documenting it working this way, then removing the "needsdocs" keyword and never doing so. Jun 10, 2015 at 10:09
9

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.

3
  • Why not simply keep the single-quotes that were already there, rather than mucking up the value with &quot;s that don't need to exist?
    – cHao
    Jun 10, 2015 at 20:17
  • The loop attribute you linked to is on Media elements, not a span, so is completely irrelevant. The first half of this question is mis-information. Sep 4, 2018 at 7:44
  • @RoryMcCrossan there is already a note (albeit in smaller font) mentioning that loop is invalid on span; rest of the answer describes why jQuery handles it in a special way, and the proper alternative.
    – Salman A
    Sep 4, 2018 at 8:02
8

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.

3
  • 3
    Indeed, jQuery special-cases "boolean" attributes so attr() can do the "right" thing. That's why "loop" is returned instead of the actual value of the attribute. Jun 10, 2015 at 10:02
  • Not all boolean attributes though. The same happens with, for instance, required or checked but not with nowrap or declare.
    – Mr Lister
    Jun 10, 2015 at 15:27
  • @MrLister, that's because nobody ever queries the value of nowrap and declare ;) Jun 10, 2015 at 22:21
-2

I think is a jQuery bug, with vanilla Js it works without problems

var span = document.getElementsByTagName( 'span' );
for ( var i = 0, len = span.length; i < len; i++ ) {
  var out = document.querySelector( '#out'+ (i+1) );
  out.innerHTML = span[i].getAttribute( 'loopx' ) + span[i].getAttribute( 'loop' );
}
<pre id="out1"></pre>
<pre id="out2"></pre>

<span loopx='{"operator":"maxis"}'>hello</span>
<span loop='{"operator":"maxis"}'>world</span>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.