Pertanyaan JQUERY, menambahkan LI ke UL, dan kemudian menghidupkan LI itu


Saya punya UL:

<ul id="news-feed">.....</ul>

Saya ingin dapat menambahkan LI ke bagian atas daftar dan memiliki slide item yang ditambahkan ke tempatnya.

$("#news-feed").append('<li">This is my item</li>').hide().slideDown();

Masalah yang saya hadapi adalah kode di atas menggeser item news-feed ke bawah, dan bukan item yang ditambahkan. Ada ide?


4
2018-06-14 02:45


asal


Jawaban:


Jika Anda berharap untuk menggabungkan semuanya, Anda dapat menggunakannya appendTo() sebagai gantinya. Itu akan mengembalikan yang baru <li> elemen sehingga Anda dapat menggesernya ke bawah.

$('<li>This is my item</li>').appendTo("#news-feed").hide().slideDown();

EDIT: Seperti yang dicatat @cletus, Anda harus menggunakannya .prependTo() seperti yang dia lakukan dalam jawabannya, bukan .appendTo(). Ini akan membawa item baru ke bagian atas daftar.


7
2018-06-14 03:14



Jika Anda ingin menyatukannya dengan baik, balikkan dan gunakan prependTo() dari pada prepend(). Antara:

$("<li>").text("This is my item").hide().prependTo("#news-feed").slideDown();

atau

$("<li>This is my item</li>").hide().prependTo("#news-feed").slideDown();

Saya lebih suka yang pertama karena menangani melarikan diri. Yang kedua tidak. Tapi ini sebagian besar masalah preferensi.


5
2018-06-14 03:13



Biasanya kita menerimanya seperti ini:

var newsItem = $("<ul></ul>"); // Create a template item and clone from it

var parentItem = $( /* whatever selector string */ );

//  …

newsItem.clone().text("blah").hide().appendTo(parentItem).toggle('slide');

Juga, ketika Anda mengatakan "tambahkan ke bagian atas daftar", biasanya prepend() bekerja lebih baik seperti yang diharapkan.


3
2018-06-14 02:54



Ya, pertama-tama Anda perlu membuatnya tidak ditampilkan, lalu buat slide:

$("#news-feed").append('<li style="display:none">This is my item</li>').find('li:last').slideDown();

Jika itu tidak berhasil, pecahkan menjadi dua pernyataan:

$('#news-feed').append('<li style="display:none">This is my item</li>');
$('#news-feed li:last').slideDown();

1
2018-06-14 02:47