List item add to first place and remove last element with Jquery

291
December 10, 2016, at 11:46 PM

today i ran into a problem with lists and Jquery. I have a list with 4 element. It's generated dynamically from a database and refresh the database every x seconds. When i have a new record i want to remove the last list item (this works) and add a new item to the top of the list with some fancy effect and flash it 4 or 5 times. Actually i have a working code but i think it cuold be done better. My question is what is the best solution to do this?

Here is the code:

 $( document ).ready(function() {
$.fn.fadeInNext = function(delay) {
    return $(this).fadeIn(delay,function() {
        $(this).next().fadeInNext();
    });
};
$('li').hide().fadeInNext(1500);
$('li').last().remove();
$('li:eq(0)').before("<li>New item</li>").fadeIn(1500);
});

Thank you for your answers!

Regards, Gábor

Answer 1

Something like this would be nice i guess

$(function(){
    var ul = $('.list-group');
    var li = ul.find('li').last().clone();
    ul.prepend(li);
    li.stop()
        .css('backgroundColor','#FAA523')
        .animate({"backgroundColor": "white"},1500);
});

NOTE: this has a plugin dependency. So make sure you include that.

READ ALSO
how to save coordinates in db with comments when click on div and show according to coordinates in div?

how to save coordinates in db with comments when click on div and show according to coordinates in div?

What i need? I am using PHPI have a div when user click on div it will shows textarea based on coordinates then user type some text bla bla bla and press save it close and saves into database with coordinates and text and display pointer/bullet on exact coordinates...

184
Javascript onpaste not working

Javascript onpaste not working

Using the html and Javascript below I count the number of characters entered in an input field and limit them to 30I also show a counter to the user

495
How to reset form to last saved(through ajax) stage

How to reset form to last saved(through ajax) stage

The thing is I'm using jQuery("form")[0]reset(); to reset a form whenever required

300
Get cursor position in Textbox using JQuery

Get cursor position in Textbox using JQuery

I wanted to get current cursor position in a textbox using JQueryCursor position may change using keyboard arrow keys, while typing or mouse press

496