带有一些数据的 jQuery appendTo = 附加没有数据的元素

Question

我正在使用 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'));

但它只工作了一半，它正确地添加了新的

，其中包含“Foo4”，但它没有将数据类型添加到

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

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

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

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

谢谢!

编辑1感谢 Gautam3164 的建议，我看到使用append()而不是appendTo()它可以工作。看来appendTo()不保留数据属性，而append()则保留

编辑2修复了我的代码示例中的错误，有一个“message”变量，但它是“new_foo”变量

编辑3我需要 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 上的第一个问题，你们都很棒而且非常有帮助! :)

Answer 1

数据就在那里，只是没有显示在调试工具中显示的标记中。我假设 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/

您还会注意到，当您更改元素上的数据时，更改不会反射(reflect)在标记中。

//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 提供了钩子(Hook)来获取属性并对其进行管理。

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

This post provides some further insight.