带有回调行为的jQuery .attr()

时间:2014-01-04 11:25:37

标签: javascript jquery html html-lists

正在浏览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。

谢谢。

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