Question

正在浏览jQuery文档，发现了一些我不太了解的东西，但是）让我们说在页面上我有一个这样的列表：

<ul id='list0'>
    <li>list item 1<b></b></li>
    <li>list item 2<b></b></li>
    <li>list item 3<b></b></li>
    <li>list item 4<b></b></li>
</ul>

当我运行此代码时

$('#list0 li').attr('id', function(i) {
    return (i + 1) % 2 ? 'odd' : 'even';
}).each(function() {
    $('b', this).text(' -> ' + this.id);
});

我得到

的输出

列表项1 - ＆gt;奇
列表项2 - ＆gt;甚至
列表项目3 - ＆gt;奇
列表项目4 - ＆gt;甚至

一切都按预期工作，<li>内的每个<ul>获得奇数或偶数id。当我使用each()设置<b>内的内容时，我可以使用 this.id 获得id <li>。

问题是，当我使用不同的<li>属性而不是 id 时，为什么这不起作用？

$('#list0 li').attr('foo', function(i) {
    return (i + 1) % 2 ? 'odd' : 'even';
}).each(function() {
    $('b', this).text(' -> ' + this.foo);
});

结果

列表项1 - ＆gt;未定义
列表项2 - ＆gt;未定义
列表项目3 - ＆gt;未定义
列表项目4 - ＆gt;未定义

即使每个<li>的 foo 属性仍以某种方式设置为偶数或奇数，这次我无法在each()内获得 foo this.foo 。

我使用jQuery 1.10.2。

谢谢。

Answer 1

这里有两点需要注意：

首先id是唯一的，实际上你应该只有一个元素最多只有给定的id。所以你的第一个代码示例是你不应该做的事情。

元素没有foo property，您需要使用this.getAttribute("foo")或$(this).attr("foo")来访问它。

所以：

('#list0 li').attr('foo', function(i) {
    return (i + 1) % 2 ? 'odd' : 'even';
}).each(function() {
    $('b', this).text(' -> ' + this.getAttribute('foo'));
});

在旁注 - 您可能不应该有像list0, list1这样的顺序列表ID，因为它们证明是有问题的。您还应该考虑在JavaScript对象中存储任意数据，而不是在DOM上存储任意数据。

Answer 2

DOM节点可能具有属性和属性。但它们实际上是两回事。

例如

使用课程Attribute和className Property

供参考

http://javascript.info/tutorial/attributes-and-custom-properties

带有回调行为的jQuery .attr（）

2 个答案: