опора() не работает с некоторыми атрибутами

Question

У меня есть следующие элементы на моей странице HTML:

<ul class="form-tabs"> 
    <li class="active" data-bind="blah-blah-blah-1"> 
    <li class="" data-bind="blah-blah-blah-2"> 
</ul> 

мне нужно перебрать data-bind свойствами, так что я сделал следующее:

$("ul.form-tabs > li").prop('data-bind', function (index, element) { 
    console.log(element); 
}); 

В логе есть 2 undefined. JQuery API говорит: Он возвращает undefined для значения свойства, которое не было установлено, или если согласованный набор не имеет элементов. Но, подожди, мой <li> имеет data-bind Недвижимость! Кроме того, когда я пытаюсь использовать .prop('class'), он отлично работает, давая мне "active" и "".

Я сказал ОК, и написал:

$("ul.form-tabs > li").each(function (index, element) { 
    console.log(element.prop('data-bind')); 
}); 

Теперь у меня есть эта ошибка: TypeError: element.prop is not a function.

Итак, вопрос в том, что я делаю неправильно?

P.S. Я использую jquery 1.10.1 и нокаут. Может ли это быть конфликтом?

P.P.S. Спасибо всем, этот код работает отлично:

$("ul.form-tabs > li").each(function (index, element) { 
    console.log($(element).attr('data-bind')); 
}); 

Answer 1

Существует разница между «свойствами» и «атрибутами». «Свойство» - это то, что доступно непосредственно на узле DOM; такие свойства, как «id», «name», «tagName» и т. д. являются свойствами.

Атрибуты, которые парсер HTML не распознает в качестве стандартных атрибутов для определенного тега, являются , а не доступными как свойства на узле DOM. Вместо этого к ним нужно обращаться через .setAttribute() и .getAttribute(). В терминах jQuery это означает использование .attr() вместо .prop().

«Семейство» атрибутов data-* немного отличается тем, что механизм jQuery .data() неявно извлекает значения из тех, которые запрашиваются при соответствующем ключе данных. Он будет не, однако обновите значения атрибутов через setAttribute(). Нужно ли вам это или нет, зависит от того, как работает ваш код. Когда задействованные атрибуты предназначены для интерпретации другой библиотекой, то, как такие обновления должны работать, зависит от этой библиотеки; возможно, вообще не удастся подойти к проблеме, так как другая библиотека не может обратить внимание на значение атрибута DOM после того, как оно было первоначально обработано элементом.

В любом случае при использовании .data() для доступа к атрибутам data-* jQuery ожидает, что ключи будут выглядеть как часть имени атрибута, следующего за префиксом data-. Для удобства (я предполагаю), jQuery будет обрабатывать версии ключей данных на верблюжьих сундуках как эквивалентные версиям, разделенными тире.То есть, если элемент HTML выглядит

<div id=x data-some-thing=whatever> 

затем из JQuery вы можете получить значение в любом из этих способов:

var withDashes = $("#x").data("some-thing"); 
var camelCase = $("#x").data("someThing"); 

Еще одна вещь, чтобы отметить: иногда, извлечение ценность DOM node, а значение свойства вместо значения атрибута получает разные результаты. Одним из важных примеров является атрибут href элементов <a> или атрибут action тега <form>. Значения будут (в большинстве браузеров, в любом случае, возможно, все) «нормализованы», чтобы отразить фактический URL-адрес, который будет использоваться, если тег будет активирован. С другой стороны, значение атрибута останется тем, что было первоначально проанализировано из источника HTML. Это может быть важно, когда у вас есть код на стороне клиента, налагающий собственную интерпретацию этих атрибутов.

Answer 2

Первое, что вы делаете неправильно, это объединение свойств и атрибутов. Между ними не всегда есть связь 1: 1.

Используйте jQueryObject.data('bind'), чтобы прочитать значение атрибутов data-bind.

Второе, что вы делаете неправильно, ожидает, что this внутри цикла jQuery each будет объектом jQuery. Это не так, это будет объект DOM.

Использование jQuery(this).data('prop').

Answer 3

Вместо этого используйте data().

$('ul.form-tabs > li').each(function() { 
    console.log($(this).data('bind')); 
});