prop（）不適用於某些屬性

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);
});

日志中有兩個undefined 。 JQuery API說： 它為尚未設置的屬性的值返回undefined ，或者匹配的set沒有元素。 但是，等一下，我的<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 。

所以，問題是：我做錯了什么？

PS我使用jquery 1.10.1和淘汰賽。 這可能是沖突嗎？

PPS感謝大家，這段代碼非常完美：

$("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節點屬性的值作為屬性值而不是屬性值獲取會得到不同的結果。 一個重要的例子是<a>元素的href屬性或<form>標簽的action屬性。 屬性值（在大多數瀏覽器中，無論如何;可能全部）將被“標准化”以反映在標簽被激活時將使用的實際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'));
});