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

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

但是，{em> <{3}}和audio元素中的loop属性。

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

如果您为自己的属性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，只返回属性名称。此行为记录为并且不是错误：

关于布尔属性，请考虑由...定义的DOM元素   HTML标记<input type="checkbox" checked="checked" />，并假设   它位于名为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错误，与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>

是＆＃34;循环＆＃34; span内的特殊关键字？

4 个答案: