正在浏览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);
});
我得到
的输出一切都按预期工作,<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);
});
结果
即使每个<li>
的 foo 属性仍以某种方式设置为偶数或奇数,这次我无法在each()
内获得 foo this.foo 。
我使用jQuery 1.10.2。
谢谢。
答案 0 :(得分:3)
这里有两点需要注意:
首先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上存储任意数据。
答案 1 :(得分:2)
DOM节点可能具有属性和属性。但它们实际上是两回事。
例如
使用课程Attribute
和className Property
供参考
http://javascript.info/tutorial/attributes-and-custom-properties