Является ли "цикл" специальным ключевым словом внутри span?

У меня есть следующий 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/

Ответ 1

Нет атрибута loop в span: только глобальные атрибуты.

Однако в audio и video.

Для пользовательских атрибутов вы должны использовать data атрибуты, как определено в HTML5.

Если вы назовете свой атрибут data-loop, вы можете получить доступ к нему через element.dataset.loop.

Ответ 2

В соответствии со спецификациями loop является логическим атрибутом, что означает, что вы должны указать его одним из следующих способов **:

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

Любое другое значение, такое как loop="false" или loop="0" или loop='{"operator":"maxis"}', просто означает, что атрибут цикла присутствует, и аудио/видео будет зацикливаться.

Теперь для булевых атрибутов jQuery.attr просто возвращает имя атрибута. Это поведение документировано , и это не ошибка:

В отношении логических атрибутов рассмотрим элемент DOM, определенный HTML-разметка <input type="checkbox" checked="checked" />, и предположим он находится в переменной JavaScript с именем elem:

$( elem ).attr( "checked" ) (1.6.1 +) (возвращает) "checked"(String) изменится с состоянием флажка

Объяснив это, правильным решением будет использование атрибутов данных 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>

Ответ 3

loop - это атрибут, используемый в тегах мультимедиа html5, который ожидает логическое значение true или false. Я ожидаю, поэтому это не работает.

Ответ 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>

Ответ 5

Тег

span не имеет атрибута loop или loopx. Кажется, проблема jQuery, попробуйте использовать getAttribute:

$(function() {
  $('span[loop]').each(function(index) {
    alert(this.getAttribute('loop')); // {"operator":"maxis"}
    //alert($(this).prop('loop')); //undefined
    //alert($(this).attr('loop')); //loop
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<span loop='{"operator":"maxis"}'>world</span>