“loop”是span中的特殊关键字吗？

Question

我有以下HTML：

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

如果我想检索它的属性值{"operator":"maxis"}，我可以简单地使用

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

但是，对于以下HTML

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

我得到以下结果：

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

我想知道，如果loop是span中的特殊关键词吗？

这是测试代码：http://jsfiddle.net/yccheok/ghggtrfq/4/

Answer 1

loop元素中没有span属性：仅限全局属性。

但是，loop和audio元素中有video属性。

对于自定义属性，您应该使用HTML5中定义的data attributes。

如果您将属性命名为data-loop，则可以通过element.dataset.loop本地访问它。

Answer 2

根据规格，loop是boolean attribute，这意味着你必须通过以下方式之一指定**：

<span loop>
<span loop="">
<span loop="loop">

任何其他值，如loop="false"或loop="0"或loop='{"operator":"maxis"}'只是暗示循环属性存在，音频/视频将循环。

现在，对于布尔属性，jQuery.attr只返回属性名称。记录此行为，这不是一个错误：

关于布尔属性，请考虑由HTML标记<input type="checkbox" checked="checked" />定义的DOM元素，并假设它位于名为elem的JavaScript变量中：

$( elem ).attr( "checked" )（1.6.1+）（返回）"checked"（字符串）将随复选框状态而变化

解释了这一点后，正确的解决方案是使用HTML5数据属性。 jQuery在页面加载时解析数据属性，因此您可以这样做：

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

**请注意，此属性在span元素上无效。

Answer 3

loop是html5媒体标记中使用的一个属性，它需要一个布尔值true或false值。我希望这就是为什么以上不起作用的原因。

Answer 4

我认为这是一个jQuery bug，与vanilla Js一起工作没有问题

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>