3

我正在使用 jQuery，我有一个简单的列表

<ul id="list">
 <li data-kind="foo">Foo1</li>
 <li data-kind="foo">Foo2</li>
 <li data-kind="foo">Foo3</li>
</ul>

我想在其中添加这个新元素

<li data-kind="foo">Foo4</li>

我认为这段代码应该可以完成这项工作

new_foo = jQuery('<li/>').data('kind', 'foo').text('Foo4');
new_foo.appendTo(jQuery('#list'));

但它只工作了一半，它正确地添加了新的 <li> 里面有 'Foo4' 但它没有将数据类型添加到 <li>

在 Chrome 控制台中检查我看到 new_foo 有 data-kind="foo" 但实际上我在 Chrome 检查器中看不到它，如果我尝试在控制台中执行

$('#list').find('li')

我看到所有具有数据类型的项目，除了新添加的项目。

知道为什么 appendTo 似乎忽略了数据字段吗？

谢谢！

EDIT1 感谢 Gautam3164 的建议，我看到使用 append() 而不是 appendTo() 它可以工作。似乎 appendTo() 不保留数据属性，而 append() 确实

EDIT2 修复了我的代码示例中的错误，有一个“消息”变量，但它是“new_foo”变量

EDIT3 我需要存在 data-kind="foo" 因为我有一个复选框（带有 'filter_switch' 类）来显示/隐藏具有 data-kind="foo" 的项目。当我使用 .data() 时，它不适用于新创建的项目，而使用 .attr() 时，它可以按预期工作。

代码类似于：

jQuery('.filter_switch').click(function(){
 elem = jQuery(this);
 if (elem.prop('checked')) {
  jQuery('li[data-kind="' + elem.data('kind') + '"]:hidden').show();
 } else {
  jQuery('li[data-kind="' + elem.data('kind') + '"]:visible').hide();
}

非常感谢大家，这是我在 stackoverflow 上的第一个问题，你们都很棒而且很有帮助！:)

4

1 回答 1

2

数据在那里，只是没有显示在调试工具中显示的标记中。我假设 jQuery 将这些数据存储为attribute.

var new_foo = jQuery('<li/>').data('kind', 'foo2').text('Foo4');
new_foo.appendTo($("#list"));

alert($("li:eq(3)").data("kind")); //alerts foo2

工作示例 http://jsfiddle.net/JB549/

您还会注意到，当您更改元素上的数据时，这些更改不会反映在标记中。

//Notice that changes are not reflected
$("li:eq(0)").data("kind", "notFoo");
alert($("li:eq(0)").parent().html()); //markup doesn't contain notFoo

我只是在猜测，但 jQuery 正在内部管理这些数据。这很可能是您必须为这些属性添加前缀的原因data-。它为 jQuery 提供了获取属性和管理属性的钩子。

更新示例 http://jsfiddle.net/JB549/2/

这篇文章提供了一些进一步的见解。

于 2013-05-09T09:25:56.753 回答