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表示尚未设置的属性的值，或者匹配的集合没有元素。但是，等一下，我的{ {1}}拥有<li>财产！此外，当我尝试使用data-bind时，它会完美地为我提供.prop('class')和"active"。

我说好了并写了这个：

""

现在我有这个错误：$("ul.form-tabs > li").each(function (index, element) { console.log(element.prop('data-bind')); });。

所以，问题是：我做错了什么？

P.S。我使用jquery 1.10.1和淘汰赛。这可能是冲突吗？

P.P.S。感谢大家，这段代码非常完美：

TypeError: element.prop is not a function

Answer 1

＆＃34;属性＆＃34;之间存在差异。和＆＃34;属性＆＃34;。 A＆＃34;属性＆＃34;是直接在DOM节点上可用的东西;类似＆＃34; id＆＃34;，＆＃34; name＆＃34;，＆＃34; tagName＆＃34;等等属性。

HTML解析器未将其识别为特定标记的标准属性的属性不可用作DOM节点上的属性。相反，必须通过.setAttribute()和.getAttribute()访问它们。在jQuery术语中，这意味着使用.attr()而不是.prop()。

＆＃34;家庭＆＃34; 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节点属性的值作为属性值而不是属性值获取会得到不同的结果。一个重要的示例是href元素的<a>属性或action标记的<form>属性。属性值将（在大多数浏览器中，无论如何;可能全部）将被标准化＆＃34;反映标签激活时将使用的实际URL。另一方面，属性值将保留最初从HTML源解析的内容。当您获得客户端代码对这些属性强加自己的解释时，这一点非常重要。

Answer 2

你做错的第一件事是混淆属性和属性。它们之间并不总是有1：1的连接。

使用jQueryObject.data('bind')读取data-bind属性的值。

你做错的第二件事是期望jQuery this循环中的each将是一个jQuery对象。它不是，它将是一个DOM对象。

使用jQuery(this).data('prop')。

Answer 3

改为使用data()。

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

prop（）不适用于某些属性

3 个答案: