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

, но это работает только половина, это правильно добавляет новый <Li> с внутренней «Foo4», но это не добавляет данные в своем роде в < литий >

Проверка в консоли Chrome я вижу, что new_foo имеет данные-тип = «Foo», но на самом деле я не могу видеть его в Хром инспектор, и если я пытаюсь в консоли, чтобы сделать

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

Я вижу все детали с данными роде КРОМЕ свеже добавил один.

Любая идея, почему appendTo, кажется, игнорирует поля данных?

Спасибо!

EDIT1 Благодаря предложению Gautam3164, я видел, что использование присоединять() вместо 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 и вы были удивительные и очень полезно! :)

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.