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'));

但它只能工作一半，它正确地添加了新的＆lt; li＆gt;内置'Foo4'，但不会将数据类型添加到＆lt; li＆gt;

检查Chrome控制台我看到new_foo有数据类型=“foo”，但实际上我在Chrome检查器中看不到它，如果我在控制台中尝试执行

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

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

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

谢谢！

EDIT1 感谢Gautam3164的建议我看到使用append（）而不是appendTo（）它的工作原理。似乎appendTo（）不保留数据属性而append（）执行

EDIT2 修正了我的代码示例中的错误，有一个'message'变量，但它是'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的第一个问题，你们都很棒，非常有帮助！：）

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/

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

//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/

This post provides some further insight.

jQuery appendTo有一些data = append元素没有数据

1 个答案: